Redux：可预测化的JavaScript状态管理容器

一、Redux简介

Redux is a predictable state container for JavaScript apps.

Redux是一个可预测化的JavaScript状态管理容器。

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

它可以运行在客户端、服务端以及原生应用中。

二、Complementary Packages

npm install --save redux

npm install --save react-redux

npm install --save redux-devtools

三、核心思想

The whole state of your app is stored in an object tree inside a single store.

核心思想1：Store是单一数据源，只有一个Store。

The only way to change the state tree is to emit an action, an object describing what happened.

核心思想2：改变state的唯一方法是触发action。不能在state上直接修改数据。

To specify how the actions transform the state tree, you write pure reducers.

使用reducer纯函数来改变state，reducer函数接收旧的state和action作为参数，返回新的state。

四、Redux的组成

1、action，它是信息的载体，它描述了一个特定的行为。使用store.dispatch()可以把action传递到store中去。action是store的唯一信息来源。

2、reducer，它的任务是定义整个程序的state如何响应。

3、store，它保存着整个程序的state，它是action和reducer这二者的粘合剂。它的常用API有：getState()、dispatch()、subscribe()。

五、代码展示

1、初始化程序状态

2、定义actions

3、创建reducer

4、创建store及其相关操作

六、小结

1、调用store.dispatch(action)，用于执行一个action。

2、store调用时传入reducer函数。store的来源就是reducer，createStore(rootReducer)用于创建store。

3、reducer接收state和action作为输入，根据action处理后返回新的state。

4、store中保存了reducer返回的完整state。可以使用store.getState()来获得当前state，也可以通过store.subscribe()来监听state的变化。

5、Redux没有Dispatcher，也不支持多个Store。当应用程序中数据越来越复杂时，建议的做法是对root reducer函数进行分割。

参考资源：

1、Redux官网：https://redux.js.org/

2、张轩《React全栈 整合开发》

3、Github：https://github.com/reactjs/redux/tree/master/logo