Redux.js Notes
Store
The store is a javascript object which stores the state of the entire application.
The important thing to know about the store is that your access to the store is indirect. To read from the store, you use its `getStore` function . To write to the store, you must dispatch actions.
We’ll go into the details on how to exactly create, read, and write from the store, but we first need to go over actions and reducers.
Actions
An action is a plain javascript object that represents a payload to the store. You send it to the store through `store.dispatch()` where `store` is your application store is created by `createStore`. This is the only way to update the store. The only requirement an action needs is a type property.
Action Creators
An action creator is a function that returns an action.
You can use an action creator as the argument to `store.dispatch`
Reducers
Actions describe what happens. Reducers take actions and transforms the state.
As we mentioned earlier, the state of the entire application is a single object called the store.
You can implement the store anyway you want. For example, depending on the specs of the todo app, it might be better to implement the store to be more “database-like”.
The reducer works by taking the previous state and an action and returns the new state.
A reducer should never:
- mutate the arguments
- perform side effects
- call non-pure functions (functions with side effects)
First time reducer is called, the state is `undefined`, in which case, it uses the `initialState`.
In the reducer below, it would handle the visibility filter action and add todo action. Note the use of the Object.assign to create a new state object rather than mutating the existing one. Immutable data is a part of the redux state philosophy.
Reducer Composition
Note our reducer above has a case statement for every action. A complex app can easily have dozens of actions, we probably don’t want our main reducer function with dozens of case statements. Let’s break up the reducers and compose them.
Note how we decomposed the above reducer into the constituent reducers `visibilityFilter` and `todos`. We were able to do this because these two reducers handled different parts of the state object independently. This may not always be the case, so you gotta be careful.
Combining Reducers with combineReducers
The creators of redux had the foresight to anticipate such a composition pattern, they gave us a `combineReducers` function.
If you have a lot of reducers in separate files and you don’t want to import them and compose them individually, you can mass import them into the `combineReducers` like so:
By the way, the redux terminology refers to the `todoApp` above as the root reducer.
Back to Store
As mentioned earlier, the store is a single object that holds the entire application’s state. To instantiate an instance of the store, you need the main reducer (hence, we are revisiting the store after discussing reducers)
`createStore` also takes a second option argument that is the initial state of the store.
New ES6 Anonymous Function Syntax
Just FYI, note the new syntax for anon functions. You’re gonna see this a lot in redux code.
Altering the store
As mentioned earlier, you cannot alter the state of the store directly. To change the state, you must dispatch actions. The store also has a `subscribe` method which takes a callback and runs it every time the state changes.
Integration with React with React-Redux
Redux handles the data/model aspect of our app. For the views and UI layer, we will use React. For a primer on React, check out these React.js notes.
To integrate Redux with React, there’s an official library by React called react-redux, which provides bindings for Redux.
React-Redux `Provider`
To use, start by importing the `Provider` component from the react-redux library, and wrap the root component (the component which renders all other components) in `Provider` before rendering.
This will make the `store` instance available to all the components.
React-Redux `Connect`
We also import the `connect` function from “react-redux” and use it to wrap around components we want to connect to redux. Components wrapped by `connect` will received the `dispatch` function as a property. `connect` also takes as an argument a function called the `select`. This `select` function, which is provided by us, selects the state properties which we want to make available to the component.
Now your React Components and the Redux Store are talking!