Redux Namespaces

Namespace Redux actions, reducers and state.

Usage

Build re-usable components in React, or any other UI library, using Redux adds complexity. Namespacing actions, reducers and state allows multiple instances of components to co-exist with independent state.

Read more: insert article url

Reducers

When handling multiple components and computing derived data an application's reducer must be aware of this nature. Usually when reducing the action it passes some meta data. This meta data sometimes changes the returning state structure.

Using createReducer(), reducers can be written without the need of this meta data. For example, our state has two superhereos and the application sets their side kick. The reducer is written as if it only had a single superhero. So no longer do reducers have to be instance aware. Regardless if it's batman or superman the reducer will set the side kick.

import { createStore } from 'redux';
import { createReducer } from 'redux-namespaces';

// Always set the initial state, see Caveats below
const initial = {
  batman: {},
  superman: {}
};

// Generic superhero reducer
const superheroReducer = (state, action) => {
  switch (action.type) {
    case 'SET_SIDE_KICK':
      return {
        ...state,
        sideKick: action.sideKick,
      };
    default:
      return state;
  }
};

// Make the generic reducer namespace aware
const reducer = createReducer(superheroReducer);
const store = createStore(reducer, initial);

Action Creators

Action creators now don't require the meta data for the reducer. Since the reducer is built for a single superhero actions can now follow the same pattern.

const actions = {
  sideKick(sideKick) {
    return {
      type: 'SET_SIDE_KICK',
      sideKick,
    };
  }
};

Use createActions() with a given state namespace and the actions list to generate action creators.

import { createActions } from 'redux-namespaces';

// Namespace actions
const batman = createActions('batman', actions);
const superman = createActions('superman', actions);

batman and superman can now disptach the same actions to the reducer but state independent.

// Dispatch
store.dispatch(batman.sideKick('Robin'));
store.dispatch(superman.sideKick('Jimmy Olsen'));

store.getState(); // { batman: { sideKick: 'Robin' }, superman: { sideKick: 'Jimmy Olsen'} }

React

Combine Redux Namespaces with React following the usual react-redux setup. However use createActions for mapDispatchToProps().

const mapDispatchToProps = dispatch =>
	bindActionCreators(
		createActions('namespace', {
	      propAction() {
	        return { type: 'action' };
	      }
		})
	);

Caveats

Initial namespaces must be set within the initial state otherwise action creators will dispatch to an undefined property within the state.

API

createActions(namespace, actions)

• namespace String The namespace for the action creators.
• actions Object Action creators to namespace.

Returns namespaced action creators.

createReducers(...reducers)

• reducers Function|[]Function Redux reducer.

Returns wrapped reducer that is namespace aware.

License

BSD-3-Clause

Copyright (c) 2017 9Technology