关于react中redux的理解

redux

redux是react的状态管理工具，在redux中，将所有的状态统一集中到唯一的stoer中管理，在store中只能通过自己定义的方法来修改状态，优点是可以预测到状态的变化，执行相应的修改方法，提高可维护性和可读性，易于状态监听。

redux的使用方法

在react项目中下载 redux和react-redux两个依赖项和redux-thunk
redux用来创建reducer store action等
react-redux用来映射仓库的状态和分发reducer--分发修改状态的方法
redux-thunk用来处理异步函数，如发请求异步，处理异步任务等、

项目中使用redux的五个步骤

创建仓库对象并导出仓库对象 store.js

第一个方法用来创建仓库，第二用来处理异步请求


使用创建仓库对象并导出

2.
创建reducer.js用来定义状态数据，使用函数定义，第一个参数是state 默认值，第二个参数是action是一个对象，可以使用action的type属性用来定义修改状态的行为


用来处理修改合并
将所用状态合并 一起导出

3.
创建action.js，用来定义仓库的修改行为，修改store状态，action实质是一个对象，修改的方法都是通过action，并提交action进行修改 其中type表示修改类型，也可以添加其他属性定义作为操作修改状态的参数。

修改方法的定义，其中content的值可以作为修改状态时的返回值。


多个修改方法的导出用export
4.
在index.js中，全局注入仓库对象并使用并修改初始的渲染组件

导入provider组件，其中组件的store属性，作为仓库属性应用在各个组件中。

5. 第一种映射
   在组件中使用状态，home.js 在其中导入映射文件
   ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200508155933495.png
   conect用来映射仓库状态，action用来修改仓库状态
   改造导出的home组件
   
   connect是一个函数，第一个参数是函数，返回值为状态数据，第二个参数是函数，返回值是修改状态的方法，connect函数的参数是组件对象 dispatch用来提交action函数
   在使用修改状态的方法时应该用this.props来调用方法

第二种映射 将connect分开定义，并导出组件


第三 异步获取数据和修改状态

异步获取数据不作为状态，就直接在文件返回数据
如果需要修改状态，要派发相应的方法并传入相应参数、

redux总结如下

redux核心概念 为 store action reducer
store是唯一的数据源，所有数据以一个树的形式存在于store中
action是 更新数据 的行为 每一个action都是一个对象 对象中有一个名为type的字段（type的值一般是一个大写形式的唯一的字符串）用于表示当前的行为类型；还可以带有其它字段用来更新Store（一般我们将额外的数据统一放到名为payload的字段中）。
reducer是一个js方法，这个方法接收两个参数：state和action。其中state表示数据，action就是上面提到的一个对象。每当有一个action被触发，所有的reducer方法都将被执行。
在reducer的方法中，如果接收到的action的type是存在的，那么就可以根据state和action来生成一个新的state，否则直接返回state。一般情况下Reducer方法中都会有一个switch，通过switch来根据接收的action.type来执行不同的更新操作。