My Redux Workflow
This is roughly the workflow in Dan Abramov’s egghead.io tutorials, with maybe a little modifications of my own (I don’t remember which ones).
test these using expect
1. write top-level reducer for a particular function (adding, removing, toggling todos)
2. implement reducer composition pattern 1: break up the just written reducer in to master reducer that calls other smaller reducers to separate concerns (master reducer controls whole array of todos, and delegates actions for individual todos to a sub-reducer. actions passed in to master reducer gets passed-through in to the sub-reducer.)
Get c0d3r’s stories in your inbox
Join Medium for free to get updates from this writer.
in master reducer todos:
case ‘ADD_TODO’:
console.log(‘ADD_TODO switch selected’)
return [
…state,
todo(undefined,action),
];in sub-reducer todo:
case ‘ADD_TODO’:
return {
id: action.id, text: action.text, completed: false,
};3. implement reducer composition pattern 2: when have completely separate functions will have several master reducers that each produce different states. (todo and visibility control). combine these two in to a single reducer by passing through the actions to the reducers in an object with key as the name of the reducer and the value calling the reducer. Recursively pass the state argument for each key (state.todos, state.visibilityFilter). A useful pattern here that can sometimes be used is to have a common action in two or more of the composed reducers, thus triggering actions in different parts of the app from a single action.
const todoApp = (
state = {},
action
) => {
return {
todos: todos (state.todos, action),
visibilityFilter: visibilityFilter (state.visibilityFilter, action),
}
}now add the store
4. check the initial state using (getState()). if initialized properly should see all initial state you expect.
5. now test each reducer by calling it using store.dispatch and logging out the state each time.
6. subscribe to the React render component and move on to UI testing.
