Redux知识总结与使用技巧

Redux的机制可以用下面这张图来概括：

1、 store

store可以看成一个容器，是我们用来保存数据的地方。整个应用中只能有一个store。

2、 state

前面说到的store对象中包含我们整个应用中所有的数据。如果想得到某个时间节点的数据，通过store就能拿到那个时间节点的数据集合。这种数据集合就叫做state，通过store.getState()可以拿到当前时刻的state。

3、 action

在Redux的思想中，用户是没有直接接触到上面所说的state，也就是数据的。那么用户在View端是如何改变state的呢？就是通过action。

action是View发出的通知，传递到store那里，告诉store要改变state了。在Redux中View使用store.dispatch()来发出action，这个方法接收一个Action对象作为参数，也就是下面action_creators.js中函数的返回值。

项目中一般会将action_types跟action_creators分离开来：

//action_types.js

//action_creators.js

4、 reducer

store收到action后，肯定就要根据action对象的type与数据来更新state。这个更新state的过程就成为reducer。Reducer是一个函数，接收传入的action与当前的state作为参数，返回值是一个新的state，如下面所示：

值得注意的是，reducer也应当是一个纯函数，所以在这里面不能直接修改参数中的当前state，而且新返回的state也必须是一个全新的对象。

5、 使用总结

在上手项目的这接近一个月的时间里，对Redux的使用也有自己的一点心得体会，在这里总结一下：

（1） 对于一个页面，也就是一个View所要展示的数据，可以用Redux来进行管理。将store中的这些数据通过props的方式传入页面组件，数据在componentDidMount中通过网络请求拿到后更新store，随后该组件也会自动重新渲染，这就是数据驱动的思想。

（2） 对于那些在整个应用的不同组件中共享的状态，也用Redux管理，这样的话可以很方便地直接通过store获取，同时修改状态后也会自动对用到该状态的其余组件重渲染。

（3） 一般组件内的一些比较局部的状态，比如按钮的disabled等，则可以不考虑用redux，而用组件内部的state来进行管理就好。但是不要dispatch与setState一起用，因为这样的话组件会重新渲染两次。对于一些可能导致组件重渲染的操作，我们应该尽量合并为一个操作，减少组件重新渲染的次数，提高应用性能。