@actualwave/redux-create-reducer

This package contains two functions made to create a redux reducer function from smaller per-action functions. So instead of

import {
  FETCH_DATA_SUCCESS,
  FETCH_DATA_FAILURE,
  UPDATE_DATA_SUCCESS,
  UPDATE_DATA_FAILURE,
  DELETE_DATA_SUCCESS,
  DELETE_DATA_FAILURE,
} from './actions';

const initialState = {};

const reducer = (state = initialState, action) => {
  switch(action.type) {
    case FETCH_DATA_SUCCESS:
      ...
    break;
    case FETCH_DATA_FAILURE:
     ...
    break;
    case UPDATE_DATA_SUCCESS:
      ...
    break;
    case UPDATE_DATA_FAILURE:
     ...
    break;
    case DELETE_DATA_SUCCESS:
      ...
    break;
    case DELETE_DATA_FAILURE:
     ...
    break;
  }
}

export default reducer;

You may have this structure

const getInitialState = () => ({});

export const fetchDataSuccess = (state, action) => {
  ...
};

export const fetchDataFailure = (state, action) => {
  ...
};

export const updateDataSuccess = (state, action) => {
  ...
};

export const updateDataFailure = (state, action) => {
  ...
};

export const deleteDataSuccess = (state, action) => {
  ...
};

export const deleteDataFailure = (state, action) => {
  ...
};

export default getInitialState;

Install

Use NPM

npm install @actualwave/redux-create-reducer

Yarn

yarn add @actualwave/redux-create-reducer

Or download source from original gist.

How to use

For example, we have three files for actions, reducer and redux configuration in setup file.

1. Define action types in actions file

export const FETCH_SETTINGS_SUCCESS = 'fetchSettingsSuccess';

The value of action type will be used to determine which function should be called.

2. Use action type to create a reducer function for it in reducer file

export const fetchSettingsSuccess = (state, { payload }) => ({
  ...state,
  ...payload,
  initialized: true,
});

3. If default export from reducer file exists, it must be a factory function for default state. If not defined, function that always returns empty object will be used. So, let's add default state factory to reducer file

export default () => {
  return {
    firstSetting: true,
    secondSetting: false,
    initialized: false,
  };
};

4. Add reducer to redux storage in setup file

import { createStore, combineReducers } from 'redux';
import { createReducer } from '@actualwave/redux-create-reducer';
import * as settings from './reducer';

const store = createStore(
  combineReducers({
    settings: createReducer(settings),
  }),
);

If you have multiple reducers

import { createStore, combineReducers } from 'redux';
import { createReducers } from '@actualwave/redux-create-reducer';
import * as items from './items/reducer';
import * as settings from './settings/reducer';
import * as users from './users/reducer';

const store = createStore(
  combineReducers(
    createReducers({
      items,
      settings,
      users,
    }),
  ),
);

API

This module exposes two functions

• createReducer() -- create reducer function from an object with set of action handlers. Each action handler is assigned to action type by property key and will be called only when action of this type passed.

/*
  Will create a reducer function which accept "fetchDataSuccess" and "fetchDataFailure" actions.
*/
const reducer = createReducer({
  
  /*
    this function will be called only when action with type "fetchDataSuccess" is dispatched:
    { type: "fetchDataSuccess" }
  */
  fetchDataSuccess: (state, action) => ...,
  
  /*
    this function will be called only when action with type "fetchDataFailure" is dispatched:
    { type: "fetchDataFailure" }
  */
  fetchDataFailure: (state, action) => ...,
});

/*
  Will create a reducer function which accept "fetchDataSuccess" and "fetchDataFailure" actions
  and have empty `items` array in default state object.
*/
const reducer = createReducer({
  
  // handles "fetchDataSuccess" actions
  fetchDataSuccess: (state, action) => ...,
  
  // handles "fetchDataFailure" actions
  fetchDataFailure: (state, action) => ...,
  
  // default state factory
  default: () => ({items: []}),
});

Normally its used against exports from one file that describes single reducer

/*
  contents of ./data/reducer file
  
  Every exported entity must be an action handling function and
  `export default` must be a default state factory.
*/

// handles "fetchDataSuccess" actions
export const fetchDataSuccess: (state, action) => ...;

// handles "fetchDataFailure" actions
export const fetchDataFailure: (state, action) => ...;

// default state factory
export default () => ({items: []});

Import everything from a reducer file and create a reducer function from it.

import * data from './data/reducer';

const reducer = createReducer(data);

• createReducers() -- applies createReducer() to object properties.

// create reducers for "data", "settings" and "items" properties
const reducers = createReducers({
  data,
  settings,
  items,
});

Is equivalent to

const reducers = {
  data: createReducer(data),
  settings: createReducer(settings),
  items: createReducer(items),
});

Accepts object of objects and returns object with same keys but reducer functions as values.

const reducers = createReducers({
  data: {
    fetchDataSuccess: (state, action) => ...,
    fetchDataFailure: (state, action) => ...,
    default: () => ({ items: [] }),
  },
});

This code will result in creating a reducer for "fetchDataSuccess" and "fetchDataFailure" actions which will be stored in "data" property:

{
  data: (state, action) => {
    /* "fetchDataSuccess" and "fetchDataFailure" handled here */
    ...
  },
};

Then this object can be passed directly to redux's combineReducers().

const reducers = combineReducers(
  createReducers({
    data: {
      fetchDataSuccess: (state, action) => ({ ...state, loaded: true }),
      fetchDataFailure: (state, action) => ({ ...state, loaded: false }),
      default: () => ({ items: [], loaded: false }),
    },
  })
);

Notes

From my experience, createReducer() best works with camel-cased action types

// good
const MY_FIRST_ACTION = 'myFirstAction';

// bad
const MY_SECOND_ACTION = 'MY_SECOND_ACTION';

In this case you will get these function names for action handlers in reducer file:

// for "myFirstAction" action type
export const myFirstAction = (state, action) => {
  ...
};

// for "MY_SECOND_ACTION" action type
export const MY_SECOND_ACTION = (state, action) => {
  ...
};

But its all up to developer how to generate action types, they just need to be valid JS identifiers.

If you like such way of structuring reducers, check redux-actions library, it gives tools for complex and standartized approach for managing actions and reducers.