react-redux

redux

数据层的框架，解决react的数据传递问题。react的数据传递仅能在两个有关联的组件之间传递，如果第一层的组件要传递数据到第n层，就会很麻烦，所以需要一个数据层框架。Redux = Reducer + Flux（最初的数据层框架）

redux的工作流程

将redux的工作流程比作为图书馆借书还书的整个过程

React Component：借书的人

Action Creators：借书的话

Store：图书馆

Reducers：记录书的本

流程（白话）：

一个“借书的人” 说了一句“我要借书”的话，之后会在图书馆的“图书记录本”中查找书，找到了书就直接告诉借书的人

Store的工作流程（上面redux工作流程图的一个详解）：

一个自定义的组件，要先订阅到store（整个项目的数据的仓库，别忘记了引入）然后要自定义一个action（这个东东就相当于告诉store要更改什么数据，拿到什么数据，个人理解为一个行动步骤）通过dispatch()方法将自定义的“行动”传递给store

在自己建立的store数据的仓库之中（就一文件夹），首先要有一个index.js的文件作为“管理员”（数据的管理）[直接import一个createStore，之后还要用一个数据的列表（数据本子reducer）才能完成的创建一个store，最后返回一个store]

之后还要创建一个数据的列表（数据本子）的文件reducer

（这个文件要有数据（一个数据的对象，包含项目的数据）、还要有一个函数，这个函数完成之前数据（prevState）的拷贝（因为不允许reducer直接修改prevState）得到一份新的数据（newState）通过action来针对newState数据的修改（这里同理不能直接修改prevState数据））

之后这个reducer会返回一个进过拷贝比对得到的newState数据到store（也就是index.js文件）redux的store会自动的用newState替换原来的prevState（内部的）

因为之前在自定义的组件完成了仓库的订阅工作，当仓库的新数据有了，就会告诉订阅这个数据的仓库的组件将新的state替换组件的state

redux的设计与使用原则：

• store是唯一的
• 只有store能改变数据（内部自动）
• reducer必须是一个纯函数（给定固定的输入就一定有固定的输出，不会有任何的副作用）