create-reducer-redux

Create simple and functional reducers that can listen to multiple action creators.

Installation

npm i -S create-reducer-redux

Usage

Actions need to follow a convention of {type, data}, where type is the action type being fired, and data is the data associated with the action (if there is any). Otherwise, we can omit the data key.

const AuthActionCreators = {
 
  loginSuccess(user) {
    // Pretend we succesfully logged in
    return {
      type: ActionTypes.LOGIN_SUCCESS,
      data: {currentUser: user}
    };
  },
 
  logoutSuccess() {
    return {
      type: ActionTypes.LOGOUT_SUCCESS
    };
  }
 
  // ...
};

In your reducer, must provide a name and handlers key. An action handler can listen to multiple actions being fired if necessary.

// src/reducers/AuthReducer.js
 
// Alternate import: `import {createReducer} from 'create-reducer-redux;`
import createReducer from 'create-reducer-redux';
 
// Always provide an initial state to begin with
const initialState = {
  authError: null,
  currentUser: null
};
 
export default createReducer(initialState, {
 
  name: 'Authentication',
 
  handlers: {
    onLogin: [ActionTypes.LOGIN_SUCCESS],
    onLogout: [
      ActionTypes.LOGOUT_SUCCESS,
      ActionTypes.TOKEN_EXPIRED,
      ActionTypes.BLACKLISTED,
      // ... Other actions that trigger a logout
    ]
  },
 
  // Action handlers receive the current state and the `data` key from the action fired
  // as arguments. You must return a new (altered or unaltered) state from each action creator
  onLogin(state, data) {
    return {...state, currentUser: data.currentUser};
  },
  
  // Here is an example of an action handler listening to multiple actions
  onLogout() {
    return initialState;
  }
 
});

Immutable.js

I highly recommend pairing create-reducer-redux with Immutable.js. Immtuable.js provides immutable datatypes to ensure that actions handlers don't cause side effects.

The usage is indentical:

// Immutable.js Example
 
import createReducer from 'create-reducer-redux';
import Immutable from 'immutable';
 
// Always provide an initial state to begin with
const initialState = Immutable.fromJS({
  authError: null,
  currentUser: null
});
 
export default createReducer(initialState, {
 
  name: 'Authentication',
 
  handlers: {
    onLogin: [ActionTypes.LOGIN_SUCCESS],
    onLogout: [
      ActionTypes.LOGOUT_SUCCESS,
      ActionTypes.TOKEN_EXPIRED,
      ActionTypes.BLACKLISTED,
      // ... Other actions that trigger a logout
    ]
  },
 
  // Action handlers receive the current state and the `data` key from the action fired
  // as arguments. You must return a new (altered or unaltered) state from each action creator
  onLogin(state, data) {
    return state.merge({
      currentUser: data.currentUser
    });
  },
  
  // Here is an example of an action handler listening to multiple actions
  onLogout() {
    return initialState;
  }
 
});

createConstants

create-redux-reducer also provides a convenient way for you to create clean and legible action type constants:

import {createConstants} from 'create-redux-reducer';
 
const actionTypes = createConstants([
    'HELLO',
    'THERE',
    'WORLD'
]);
 
// This will become:
 
// const actionTypes = {
// 	'HELLO': 'HELLO',
// 	'THERE': 'THERE',
// 	'WORLD': 'WORLD'
// };