React & Redux

上面配图是一个我自己整理的redux里面的todoMVC demo示意图，串联着看的话能大概看懂项目的结构。github项目链接地址如下：

https://github.com/reactjs/redux/tree/master/examples/todomvc

对于redux，知乎上有一些前辈回答的十分精炼简洁，我觉得每次看一遍都会有新的理解。贴出如下《理解 React，但不理解 Redux，该如何通俗易懂的理解 Redux？》：

https://www.zhihu.com/question/41312576/answer/90782136

---

Action：

addTodo、deleteTodo分别为新增、删除待办事项的方法。新增需要知道文本内容text，删除需要知道对应id。由图可知方法返回的数据结构必有type，用于匹配reducer中的实现方法，其余参数为reducer中操作state的所需参数

综述：action只声明数据结构，types和必要参数

Reducer：

reducer用来匹配action的type，该方法会返回一个旧的state和action，action用于匹配逻辑代码

综述：reducer接受一个旧的state，并且返回一个新的state

Store：

图中用了creatStore新建store并且加入了热替换，编码比较固定。可知，reducer被注入store，store中存储了总状态，发布action（这句话如果理解的牵强就先记住）

综述：store中存储了所有的state

App：

图中标注了几处，这里通过connect把action和action（reducer）放在了一起。图中state的值为reducer中返回的对象（reducer就是操作旧的state，返回新的state），这里我们还需要把有必要的值筛选出来，传入到App中作为App的props。action也被传入到了props中，所以在App的render（）函数中，代码获取了todos和actions，用以往下分发给子组件。

Provider：

这里在Provider中加入了store，其子组件为App，上面论述过store中有reducer。用户在view中调用【方法】可以发出action，然后通知store，store中的reducer根绝action改变state，state改变dom改变，最后完成渲染。