react-redux-deep-reducer

react-redux-deep-reducer

Easily create deep parameterized reducers.

Installation

npm install --save react-redux-deep-reducer

Premise

Working with react/redux, things can get complicated when building applications with state dependent on configurable properties.

For example, if you're building an analytics dashboard, you may have components that display metrics based on 1) which app the user has selected and 2) a date range filter.

You might have a reducer like:

const initialState = {
  dailyViewsByAppIdAndDateKey: {
    'myApp123': {
      '2016-02-13': { /* daily views data */ },
      '2016-02-14': { /* daily views data */ },
    },
    'myApp124': { /* other app's metrics */ },
  },
};
 
// Even if you used `immutable` to avoid this in the reducer, you'd have something
// of similar nature in your `connect` selector function.
function reducer(state = initialState, action) {
  if (action.type === 'FETCH_DAILY_VIEWS.SUCCESS') {
    return {
      ...state,
      dailyViewsByAppIdAndDateKey: {
        ...state.dailyViewsByAppIdAndDateKey,
        [action.appId]: {
          ...state.dailyViewsByAppIdAndDateKey[action.appId],
          [action.dateKey]: {
            ...state.dailyViewsByAppIdAndDateKey[action.appId][action.dateKey],
            action.dailyViews,
          },
        },
      },
    };
  }
 
  return state;
}

Using react-redux-deep-reducer is similar to redux-form. You configure and use a deepReducer:

// app/reducers/index.js
import { deepReducer } from 'react-redux-deep-reducer';
import { combineReducers } from 'redux';
import dailyViewsReducer from './dailyViews';
 
export default combineReducers({
  // ... other top-level reducers,
  deepReducer: deepReducer({
    dailyViews: dailyViewsReducer,
  }),
});

// app/reducers/dailyViews.js
const initialState = {
  dailyViews: null,
  error: null,
};
 
export default function dailyViews(state = initialState, action) {
  if (action.type === 'FETCH_DAILY_VIEWS.SUCCESS') {
    return {
      ...initialState,
      dailyViews: action.dailyViews,
    };
  }
 
  if (action.type === 'FETCH_DAILY_VIEWS.ERROR') {
    return {
      ...state,
      error: action.error,
    };
  }
 
  return state;
}

// app/components/DailyViews/index.js (connected component)
import { deepConnect } from 'react-redux-deep-reducer';
import DailyViews from './component'; // "dumb" component
 
// based on its props, this component should use the deep state at the path [appId, dateKey]
const getInstanceKey = (ownProps) => [ownProps.appId, ownProps.dateKey];
 
const deepMapStateToProps = (deepState, /* topLevelState, ownProps */) => ({
  dailyViews: deepState.DailyViews,
});
 
const deepMapDispatchToProps = (deepDispatch, topLevelDispatch, ownProps) => ({
  fetchDailyViews: () => deepDispatch({
    type: 'FETCH_DAILY_VIEWS.BEGIN',
    appId: ownProps.appId,
    dateKey: ownProps.dateKey,
  }),
});
 
export default deepConnect({ domainKey: 'dailyViews', getInstanceKey },
  deepMapStateToProps,
  deepMapDispatchToProps,
)(DailyViews);