react-redux-deep-reducer
v1.0.1
Published
Easily create deep parameterized reducers.
Downloads
5
Readme
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);