Skip to content

Instantly share code, notes, and snippets.

@burdiuz
Last active Feb 4, 2019
Embed
What would you like to do?
@actualwave/redux-create-reducer
.*
source.js

@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.

  1. Use action type to create a reducer function for it in reducer file
export const fetchSettingsSuccess = (state, { payload }) => ({
  ...state,
  ...payload,
  initialized: true,
});
  1. 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,
  };
};
  1. 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.

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function baseStateCreator() {
return {};
}
function createReducerFromActionHandlers(actionHandlers, initialStateCreator) {
if (initialStateCreator === undefined) {
initialStateCreator = baseStateCreator;
}
return function(state, action) {
if (state === undefined) {
state = initialStateCreator();
}
const reducer = actionHandlers[action.type];
if (reducer) {
return reducer(state, action);
}
return state;
};
}
function createReducer(exports) {
const reducer = createReducerFromActionHandlers(exports, exports.default);
return function(state, action) {
if (action.type === 'default') {
return state;
}
return reducer(state, action);
};
}
function createReducers(exportsMap) {
return Object.keys(exportsMap).reduce(function(reducers, key) {
reducers[key] = createReducer(exportsMap[key]);
return reducers;
}, {});
}
exports.createReducer = createReducer;
exports.createReducers = createReducers;
exports.default = createReducer;
{
"name": "@actualwave/redux-create-reducer",
"description": "Function that combines reducers and calls them when action of same name received",
"version": "1.0.1",
"main": "createReducer.js",
"dependencies": {
},
"keywords": [ "redux", "reducer", "combine", "createReducer", "combineReducers", "createReducers", "exports", "default", "structure", "function" ]
}
const baseStateCreator = () => ({});
const createReducerFromActionHandlers = (
actionHandlers,
initialStateCreator = baseStateCreator,
) => (state = initialStateCreator(), action) => {
const reducer = actionHandlers[action.type];
if (reducer) {
return reducer(state, action);
}
return state;
};
const createReducer = (exports) => {
const reducer = createReducerFromActionHandlers(exports, exports.default);
return (state, action) => {
if (action.type === 'default') {
return state;
}
return reducer(state, action);
};
};
const createReducers = (exportsMap) =>
Object.keys(exportsMap).reduce(
(reducers, key) => ({
...reducers,
[key]: createReducer(exportsMap[key]),
}),
{},
);
export { createReducer, createReducers };
export default createReducer;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment