Reduce boilerplate in Redux

README.md

Reduce boilerplate in Redux

• Create actions similar to Flummox.
• Generate action ids.
• Supports actions with promises, and therefore ES7 async.

actions.js

//
// 4 different ways to write actions: ES7 Async/Await, Promises, Async Function, Synchronous.
//

import {createActions} from './helpers.js'

export const CounterActions = createActions({

  async incrementAsync() {

    const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 1000)
    })

    let result = await promise
    return result

  },

  incrementPromise() {
  
    // Debug
    const promise = new Promise( (resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 1000)
    })
  
    return {
      types: ['INCREMENT_BEGIN', 'INCREMENT_SUCCESS', 'INCREMENT_FAILURE'],
      promise,
    }
  
  },

  incrementFunctionWithState() {
    return (dispatch, getState) => {
      const {counter} = getState()
      console.log(dispatch)
      if (counter % 2 === 0) return
      dispatch(CounterActions.increment())
    }
  },

  incrementFunction()) {
    return dispatch => {
      setTimeout(() => {
        dispatch(CounterActions.increment())
      }, 1000)
    }
  },

  increment() {
    return {}
  },

})

app.js

import React from 'react';
import {Provider} from 'redux/react';
import {RouteHandler} from 'react-router'

import {createRedux, createDispatcher, composeStores} from 'redux';
import thunkMiddleware from 'redux/lib/middleware/thunk';
import {compose} from 'redux';
import {promiseMiddleware} from './helpers.js';
import * as stores from './store.js';

const store = composeStores(stores);

const dispatcher = createDispatcher(
  store,
  getState => [promiseMiddleware(), thunkMiddleware(getState)]
);

const redux = createRedux(dispatcher);

////////////////////////////////////////////////////////////////////////////////

// We use the above code - which this is shorthand for this, but adds our promise middleware.
//const redux = createRedux(stores)

////////////////////////////////////////////////////////////////////////////////

export default class App extends React.Component {

  render() {
    return (
      <Provider redux={redux}>
        {() =>
          <RouteHandler/>
        }
      </Provider>
    );
  }

}

index.js

import React from 'react'
import App from './app.js'

React.render(<App/>, document.getElementById('body'))

store.js

import {createStore, getActionIds} from './helpers.js'
import {default as Immutable, Map, List} from 'immutable'
import {CounterActions} from './actions.js'

const actions = getActionIds(CounterActions)

const initialState = 0

export const counter = createStore(initialState, {

  [actions.increment+'-SUCCESS']: (state, actions) => {
    return state + 5
  },

})

Hello, @vjpr ! In your example you need to return a promise object from incrementPromise action (because types generates automatically in helpers::createActions).

I made some changes to avoid constants usage:

[actions.increment+'-SUCCESS']: (state, actions) => {
    return state + 5
  },

Now it looks like:

  // actions.incrementPromise.begin
  // actions.incrementPromise.success
  // actions.incrementPromise.failure
  [actions.incrementPromise.success]: (state, actions) => {
    return state + 5
  },

Can you check my fork, please? https://gist.github.com/iNikNik/3c1b870f63dc0de67c38