The app is divided into two separate parts: the data that powers the app, and the views that display that data. We want to separate the views in our application from the data in our application. Redux is the data contained inside this application box, whereas React is the views contained in the application box.

When Redux describes itself as a state container, it means a collection of all the data that describes the app that not only includes the hard data, like the list of books, but it also includes more meta-level properties, like the currently selected book. React on the other hand represents the views, which translates the app's data into something that can be displayed on the screen and user can acturally interact with.

The difference from other frameworks (Anguar, Backbone, etc.) is here we centralize all of the application's data inside of a single object, which referred to as the state. One of the most important parts of creating a Redux application is figuring out how to design state.

1. Reducer

A reducer is a function that returns a piece of the application state. Because our application can have different piecs of states, we can have many different reducers.

// Application State - Generated by Reducers - is a plain JavaScript object
{
	books: [{title: 'Harry Potter'},{title: 'JavaScript'}],	// value returned by reducer "BookReducer"
	activeBook: {title: 'JavaScript: The Good Parts'} // value returned by reducer "ActiveBookReducer"
}

Two keys, can be whatever names, and the values of states are produced by two reducers.

A reducer is created on application in a two step process: 1. create the reducer; 2. wire it into application.

combineReducers() (Document) function from Redux can be considered as mapping of state. It adds a key "books" to our global application state, and the value is whatever gets returned from BooksReducer, which in this case is an array of books.

const rootReducer = combineReducers({	// centralize all of the application's data/state inside of a single object
  books: BooksReducer,
  activeBook: ActiveBook
  // ...
});

export default rootReducer;

2. React Redux: Combine React Views and Redux State

React and Redux are two separate libraries, to connect them, use another separate library "React Redux", npm install --save react-redux. To make use of "React Redux" we need to promote one of our components as a container. The only time we get this bridge available where we can take a React component and inject state into it.

3. Container

A container, sometimes called "smart component" in contrast to regular "dumb components", is a React component that gets bonded to the application state managed by Redux. To indicate the difference, we usually separate them into different directories.

Question: Which components do we promote to be the container and which do we leave as normal components?

Answer: In general, we want the most parent component that cares about a particular piece of state to be a container (connect to Redux).

Whenever we make a container file, we want to export the container (produced by connect()) instead of the plain component.

4. connect()() function

connect()() takes a function and a component, and produces a container.

5. Trace the flow of application (before add action)

Reducer generated states object --> State function (mapStateToProps() in book-list.js) mapped the state as props to component --> During the process state updated, so component rerender the list of books.

6. Actions

The lifecycle of an action and Redux application:

Action starts off with an event triggerd directly by user interaction or indirectly like Ajax request finishing loading up, or page initially loading up. These events can optionally call(调用) an action creater. An action creater is a function that returns an action. As in diagram, the action creater returns an object. (The action object has a "type" that describes the type/purpose of action that was just triggered, and the action can also have some data that future describes the action. In this case we have the property "book" that contains the actual selected book.)

The object then automatically sent to all reducers inside application. Reducers can choose different piece of state, depending on what the action is, and return it. (Inside all our reducers we usually set up a switch statement, which will go to a different line depending on the "type" of action. A reducer doesn't have to react to every different action. And if the reducer doesn't react to an action, it returns the current state, and no status change for that particualr reducer.)

Then the returned state got piped into the application state. (In this case, ActiveBook reducer returns action.book. Because ActiveBook reducer is wired up to the activeBook key on state (see rootReducer() in index.js), it pops up as the new value of the state. In another word, whatever returnd from the reducer ends up as new value of the state.)

Once all the reducers have processed the action and return a new/current state, the application state gets pumped back into all the different containers. Then all of the containers will run the function mapStateToProps(), that state will get dissected and injected into all those containers, and all those containers will rerender with the updated state.

7. bindActionCreators()

8. Data flow

Diagram to be adjusted...