Intro to Redux.js
2020-03-16 2 min read
(1) What is Redux and when to use it?
Redux manages the state, so it's userful when your application is large and you need to manage many states and share them between multiple containers.
(2) Three Redux principles
1. Single source of truth - bundle state in one object
You'd have one single object
store that describes the entire
state of the app.
state is ready only
Instead of updating a
state, in Redux you create a new
state every time state changes, like below
This encourages immutabililty and prevents unexpected errors.
3. Pure functions
Changes are taken care of by pure functions called reducers in Redux.
(3) How Redux works
1. Actions (+ middleware)
Actions such as 'click a submit button' or 'fetch API call' need to be registred as action and dispatched to be triggered.
Reducers are pure functions that takes actions and spit out store(=
this.state). They process actions and create a new state based on them.
store is basically
this.state in Redux. It's an object that describes state of the whole application. You pass this down to
<App /> as a prop.
Reducers take actions and return state, which gets passed to store.
4. Changes happen
Once store is updated, React detects the change(s) and updates the view layer. These 4 stages happen only from action to view layer update, which is called a uni-directional data flow.
Typos/comments/suggestions are welcomed on GitHub issues