I took notes during learning “Getting Started with Redux” by Dan Abramov - who created React Hot Loader, Redux, React DnD…
The course is offered for free at egghead.io.
The Single Immutable State Tree
1st principle: the whole state of the application is describe with single JS Object.
Redux Describing State Changes with Actions
2nd principle: the state is readonly. Can not change the state without using action.
Redux: Pure and Impure Functions
Pure functions:
- The return value of the pure functions solely depends on its arguments Hence, if you call the pure functions with the same set of arguments, you will always get the same return values.
- They do not have any side effects like network or database calls
- They do not modify the arguments which are passed to them
Impure functions:
- The return value of the impure functions does not solely depend on its arguments Hence, if you call the impure functions with the same set of arguments, you might get the different return values For example, Math.random(), Date.now()
- They may have any side effects like network or database calls
- They may modify the arguments which are passed to them
Redux: The Reducer Function
Reducer the pure function takes the previous state, the action and return the next state of the whole application.
Redux: Writing a Counter Reducer with Tests
See video here
Redux: Store Methods: getState(), dispatch(), and subscribe()
What is the store:
- It holds the current application’s state object.
- It lets you dispatch actions.
- When you create it, you need to specify the reducer that tells how state is updated with actions.
Method of the store (getState, dispatch, subscribe):
- getState(): get the current state
- dispatch(): it lets you dispatch actions to change the state of your application.
- subscribe(): register a callback that the Redux store will call any time an action has been dispatched. Useful for tracking the current application state.
The basic implementation of the store is in the video.
Redux: React Counter Example
Note: smart component and dumb component
Better to read on this post.
Dumb components: the same with presentational components
Smart components: is equal with container components
Redux: Avoiding Array Mutations with concat(), slice(), and …spread
Reducer is required to be not a mutation between input and output value. Using concat(), slice and …spread operator can be useful.
1 | // remove list[index] |
Redux: Avoiding Object Mutations with Object.assign() and …spread
Object.assign() and …spread can be used to avoid mutation by returning a new object.
1 |
|
(11 ~ 23) Should watch directly, include how to organize program to dummy & smart component
Passing the Store Down (Explicitly via Props, Implicitly via Context)
Explicitly way
1 | <Page store={store} /> |
Passing like this can be complicated sometimes, for example when I only need to use the store inside the
Implicitly way
Using Context & Provider to wrap the store
inside a Context, so every child component inside can use the store
. Better to check this link.
Redux: Generating Containers with connect() from React Redux
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
Connect: creates a higher-order component for making container components out of base React components. It will mount both the state and dispatch inside the store to the props of component.
Note: mapStateToProps or mapDispatchToProps can be null if you don’t need to pass them.
End
P/S: Now I am using React Slingshot as a seed project; it contains everything you need from developing -> deploying.