Redux状态管理

Redux通过一系列约定的规范将修改应用状态的步骤标准化。

 

当需要修改应用状态时，必须发送一个action，action描述应用状态如何修改。action只是一个普通的JavaScript对象。type代表action的类型，注意action的结构并不是确定的，但必须包含type字段。

Redux通过reducer解析action。reducer是一个普通的JavaScript函数，接收action为参数，然后返回一个新的应用的状态state。

Redux的主要思想就是描述应用的状态如何根据action进行更新，Redux通过一系列API将这一主要思想的落地实施进行标准化和规范化。

 

Redux应用需要遵循三大原则：

1.唯一数据源

Redux应用只维护一个全局的状态对象，存储在Redux的store中。唯一数据源是一种集中式管理应用状态的方式，

便于监控任意时刻应用的状态和调试应用，减少出错的可能性。

2.保持应用状态只读

在任何时候都不能直接修改应用状态。当需要修改应用状态时，必须发送一个action，由这个action描述如何修改应用状态。

3.应用状态的改变通过纯函数完成

action表明修改应用状态的意图，真正对应状态做修改的是reducer。reducer必须是纯函数，所以reducer在接收到action时，不能直接修改原来的状态对象，而是创建一个新的状态对象返回。

 

纯函数式满足以下两个条件的函数：

1.对于同样的参数值，函数返回的结果总是相同的，即函数结果不依赖任何在程序执行过程中可能改变的变量。

2.函数的执行不会产生副作用。例如，修改外部对象或输出到I/O设备。

 

 

Redux应用的主要组成有action、reducer和store。

1.action

action是Redux中信息的载体，是store唯一的信息来源。把action发送给store必须通过store的dispatch方法。action是普通JavaScrpit对象，但每个action必须有一个type属性描述action的类型，type一般被定义为字符串常量。除了type属性外，action的结构完全由自己决定，但应确保action的结构能清晰地描述实际业务场景。一般通过action creator创建action，action creator是返回action的函数。

2.reducer

action用于描述应用发什么操作，reducer根据action做出响应，决定如何修改应用的状态state。既然是修改state，那么就应该在编写reducer前设计好state。state既可以包含服务器端获取的数据，也可以包含UI状态。

educer是一个纯函数，它接收两个参数，当前的state和action，返回新的state。

reducer不做任何事情，对于任意action做出的响应都是直接返回前一个state。这里需要注意state初始值的设置。这里使用ES6的扩展运算符(...)创建新的state对象，避免直接修改之前的state对象。还有一种常见的写法是使用ES6的Object.assign()函数。

注意，每个拆分的reducer只接收它负责的state中的部分属性，而不再是完整的state对象。todos接收state.todos，visibilityFilter接收state.visibilityFilter。这样，当应用较复杂时，就可以拆分出多个reducer保存到独立的文件中。

通过store将reducer和action关联起来

store

store是Redux中的一个对象，也是action和reducer之间的桥梁。store主要负责以下几个工作：

1.保存应用的状态。

2.通过方法getSate()访问应用状态。

3.通过方法dispatch(action)发送更新状态的意图。

4.通过方法subscribe(listener)注册监听函数、监听应用状态的改变。

一个Redux应用中只有一个store，store保存了唯一数据资源。store通过createStore()函数创建，创建时需要传递reducer作为参数。

总结下Redux的数据流过程

1.调用store.dispatch(action)。一个action是一个用于描述“发生了什么”的对象。

store.dispatch(action)可以在应用的任何地方调用，包括组件、XHR的回调，甚至在定时器中。

2.Redux的store调用reducer函数。store传递两个参数给reducer：当前应用的状态和action。

reducer必须是一个纯函数，它的唯一职责是计算下一个应用的状态。

3.根reducer会把多个子reducer的返回结果组合成最终的应用状态。根reducer的构建形式完全取决于用于用户。

Redux提供了combineReducers，方便把多个拆分的子reducer组合到一起，但完全可以不使用它。当使用combineReducers时，

action会传递给每一个子reducer处理，子reducer处理后的结果会合并成最终的应用状态。

4.Redux的store保存根reducer返回的完整应用状态。此时，应用状态才完成更新。如果UI需要根据应用状态进行更新，

那么这就是更新UI的时机。对于React应用而言，可以在这个时候地调用用组件的setState方法，根据新的应用状态更新UI。

react-redux提供了一个connect函数，用于把React组件和Redux的store连接起来，生成一个容器组件,负责数据管理和业务逻辑

Provider组件需要接收一个store属性，然后把store保存到context中，Provider组件正是通过context把store传递给子组件的，所以使用Provider组件时，一般把它作为根组件，这样内层的任意组件才可以从context中获取store对象。