Wondering what’s next for npm?Check out our public roadmap! »

    react-redux-deep-reducer

    1.0.1 • Public • Published

    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);

    Install

    npm i react-redux-deep-reducer

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    ISC

    Last publish

    Collaborators

    • avatar