react+redux教程（二）redux的单一状态树完全替代了react的状态机？

上篇react+redux教程，我们讲解了官方计数器的代码实现，react+redux教程（一）。我们发现我们没有用到react组件本身的state，而是通过props来导入数据和操作的。

我们知道react本身是个状态机，也就是说组件是state的表现形式。那么redux提供了一个全局的唯一的状态树，是不是就不需要组件本身的state了呢？

当然不是！

有图为证，这是官方的todomvc的例子（https://github.com/lewis617/react-redux-tutorial/tree/master/redux-examples/todomvc）：

我们直接看react开发工具截图：

App组件没有state

Header组件没有state

MainSection组件有state

TodoItem组件有state

Footer组件没有state

何时用react组件的state、props？

从上面的截图我们可以发现，state只应用了两个功能：

1. 列表的过滤功能，即完成、未完成、全部的选择
2. 每一项的编辑与查看功能，即双击每一项，即可进入编辑状态

有此我们可以得出结论，state只表示一些"临时的""内部的"状态数据。

临时的，代表你可以临时改变这个数据，比如显示完成、未完成、全部的任务，这都是临时的状态，还有任务处于编辑状态或者查看状态都是临时的。

内部的，代表如果你的数据只需要在这一个组件中使用，那么你应该使用组件的内部状态。

 

props则正好相反，它通常存储一些方法，一些可能需要存库的长期数据和一些需要传递和共享的数据。

比如App组件中的todos代表任务数组，actions代表一些操作的方法，这些我们都存进了props中。还有Footer组件中的activeCount以及completedCount都是长期存在的数据，而且可能不止一个组件在使用。

对比Redux的全局唯一的state

我们在开发工具上查看全局唯一状态树，发现是个todos数组。对应的是长期数据（并不一定要求是长期数据）和用于在多个组件中共享的数据。

再看redux+react流程

redux和react两个搭档之间，基本只有两种联系：

1. react从redux的state读取数据
2. react能dispatch分发actions到redux，redux的reducer来返回一个新的state

react组件就像是个婴儿，redux就像是奶妈：

1. 婴儿饿了，哭着要要奶喝，就是dispatch actions的过程
2. 奶妈准备好给婴儿喂奶就是，react从redux的state读取数据的过程

结论：redux的state和react组件的state没有半毛钱关系

现在我们知道redux的state装得是全局的，长期数据（并不一定要求是长期数据）也就是对应props的数据。而react组件的state，官方建议不要放这类数据，而应该是临时的内部状态数据。所以两个state没有半毛钱关系！

 

---

 

教程源代码及目录

如果您觉得本博客教程帮到了您，就赏颗星吧！

https://github.com/lewis617/react-redux-tutorial

转载于:https://my.oschina.net/u/3699676/blog/1544963