redux|react

1.引言

因此我们为何不可以将所有的数据交给一个中转站，这个中转站独立于所有的组件之外，由这个中转站来进行数据的分发，这样不管哪个组件需要数据，我们都可以很轻易的给他派发。

而有这么一个库就可以帮助我们来实现，那就是 Redux ，它可以帮助我们实现集中式状态管理

2.redux的使用场景

1. 某个组件的状态需要共享时
2. 一个组件需要改变其他组件的状态时
3. 一个组件需要改变全局的状态时

3.redux的工作流程

• 首先，用户在视图中通过 store.dispatch 方法发出 action。
• 然后，store 自动调用 reducers，并且传入两个参数：当前 state 和收到的 action。reducers 会返回新的 state 。
• 最后，当store 监听到 state 的变化，就会调用监听函数，触发视图的重新渲染。

4.redux初始化流程

1.创建createstore（store/index.js）

createStore用来创建一个Redux中的容器对象，它需要三个参数：reducer、preloadedState、enhancer。

• reducer是一个函数，是state操作的整合函数，每次修改state时都会触发该函数，它的返回值会成为新的state。
• preloadedState就是state的初始值，可以在这里指定也可以在reducer中指定。
• enhancer增强函数用来对state的功能进行扩展，暂时先不理它。
• 

2.创建reducer.js

3.创建action.js(用来处理操作）

5.简单实现（action函数调用后返回的是对象）

1.在组件中使用action处理

使用store的dispatch方法，直接调用action函数，返回一个对象，然后把该对象通知给store。然后store会自动调用reducer函数，对状态进行处理。

action中

组件中

2.store自动调用所对应的reducer函数，对状态做处理。

注意：此处的action是dispatch过来的参数。prestate是状态。

3.状态变化后，通过subscirbe函数，重新调用渲染函数

6.aciton函数调用返回的是函数

//action返回一个函数，把函数dispatch到store中，需要中间件redux-thunk，函数会有一个参数dispatch时间到了直接dispatch函数的执行结果。
1.action.js

2.组件中使用

3. store/index.js
   

注意：出现的常见错误

1.action返回的要是对象

如果action返回的是函数，则需要中间件处理。

解决方法：

1. action函数调用后返回一个对象。
   

2. 使用redux-thunk，添加中间件。