Redux相关知识

本文从以下几个方面来讲述Redux

1. Redux是什么

2. Redux如何引入

3. Redux基本概念(涉及哪些概念)

4. Redux使用

5. Redux总结

Redux是什么

Redux 是 JavaScript 状态容器，给项目提供可预测化的状态管理。把Web页面看成一个状态机，视图与状态就是一一对应的，所有的状态都保存在一个对象里面。

Redux使用场景

多个组件共用一个状态

Redux的引入

npm install Redux --save

Redux基本概念

Store

store是用来存储所有数据的地方，它具有唯一性，在Redux中提供了createStore这个函数，用来生成 Store。

State

Store保存着所有的数据，由于页面是会变化的，所以Store里的数据也会变化。有时是需要获取Store在某一个时刻时里面的值，这样就涉及到了State（时点数据的集合），想要获取这个值可以通过store.getState()进行获取。

Action

State的值是会随着页面数据的变化而变化的，而Action就是触发

State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。Action在使用时是定义一个对象，这个对像一定有type字段，表示该action的名字，其他的都是可以自己定义的，但是一般action里不要传太多的数据。

Dispatcher

store.dispatch()是 View 发出 Action 的唯一方法。可以通过dispatcher action来更新store里的数据

Reducer

Store里的state需要更新后才能让页面也发生变化，而计算新的state的过程就叫Reducer；Reducer是一个函数，其中传入参数是action和state，返回值是新的state。使用如图1所示。

图1 Reducer的使用

Redux的使用

在组件中使用时使用connect进行连接，传入的参数为要改变的state以及action。如图2所示。

图2 Redux在组件中的使用

Redux总结

Redux流程图如下图所示

图3 总结流程图