Our goal today is to add redux to an existing app. We'll cover:
combineReducersmapDispatchToProps- Action Creators
So far, we've only used redux in a tiny sample application. Let's refactor our paintr app to use redux!
The steps we'll follow when we're thinking in Redux resemble our Thinking In React steps.
- Set up redux (npm install, createStore), react-redux plumbing (Provider)
- Figure out the "shape" of your state
- "Shape" = keys and the types of their values, e.g. { count: number, friends: [string] }
- Decide initial values
- Add 'static' version of state using Redux
- Create 'default' reducers with initial values (or maybe mock data)
- Connect state to components with
mapStateToProps
- Figure out how state changes over time
- List the actions that will be triggered in your app
- Decide how your state should change in response to each action
- Implement actions and reducers
- Write action creators
- Write cases in reducers that correspond to each action
- Connect actions to components with
mapDispatchToProps
- Searchbar
- PaintingList
- PaintingDetail
- PaintingForm