Redux—redux-thunk— action里处理异步，封装详细步骤，适合初学者。

初学redux确实觉得很绕，因为封装的文件夹多容易乱。下面时我整理的步骤。

本文码云地址：https://gitee.com/guo–dong/redux.git

异步请求为第10条

本文store代表redux实例

本文用到的插件有：

1、npm install --save redux

redux用来集中的管理react中多个组件的状态

2、npm install redux-thunk --save

使用thunk后，如果return的是一个函数就会自动接收一个dispatch方法

3、npm install --save axios

axios用来发送异步请求

4、npm install --save react-redux

4.1、使用react-redux：中的connect进行多个组件中的数据合并
4.2、使用Provider：Provider 其实就只是一个外层容器，它的作用就是通过配合 connect 来达到跨层级传递数据。使用时只需将Provider定义为整个项目最外层的组件，并设置好store。那么整个项目都可以直接获取这个store。它的原理其实是通过React中的Context来实现的。它大致的核心

文件目录

标红的时重点用到的文件，store文件就代表redux

开始使用

1、下载

npm install --save redux

2、创建store文件夹

在src目录下创建store文件夹并在此文件夹下创建一下文件：
2.1、index.js
用来存放store实例
2.2、HomeReducer.js
用来存放Home页面的数据
3.3、reducer.js
用来合并数据
4.4、actionCreate.js
用来封装任务

3、创建store实例并引入reducer

4、HomeReducer.js,就是专门为Home页面创建的数据，当然其他页面也可以进行访问。其中包含我们对数据的操作。

Action 是把数据从应用传到 store 的有效载荷。唯一改变 state 的方法就是触发 action。一般来说你会通过 store.dispatch() 将 action 传到 store。
action.js由在页面调用第6步的任务时返回，返回值决定了我们对数据的操作逻辑。

5、reducer.js，引入combineReducers、引入HomeReducer.js中的数据

5.1、combineReducers用来惊醒数据合并，因为我们现在值创建了一个页面的数据，后续还会多个页面也需要创建数据，合并也是为了集中管理，后期我们号调用，所以进行合并。

6、对任务进行封装

封装的话是因为，如果我们做起来来项目，会有很多任务，如果都写在组件里面不好查找，容易重复，封装在一个文件里面可以避免这些。用的时候在对应的页面引入就行。

7、在页面调用store中的数据

7.1、引入store实例
7.2、引入reducer.js中合并的Home页面数据
7.3、调用action
7.4、将store中的数据赋值给state方便调用
7.5、用store.subscribe监听store中数据是否由变化，如果由变化就更新数据

8、至此简单的封装完毕，如果还由多个页面需使用redux需要怎么做，其实跟上面的写法时一样的，接下来接着上详细步骤。

1、例如我们现在由一个Phone也许要用使用redux，那我我们就在store文件下创建一个PhoneReducer.js。

2、同样我们也需要对任务进行封装

3、在reducer.js中引入PhoneReducer.js合并数据

4、在页调用

9、react-redux

如上面的页面那个页面要使用store中的数据都需要引入，比较麻烦，react-redux就帮助我们解决这个问题，只需配置一次，所有组件都可以访问到store实例,并且react-redux已经帮我们把subscribe封装过了过了，只要数据发生改变就会自动更新。

react-redux是redux 的作者封装的一个 react 专用的库，它能够使你的react组件从redux store中读取数据，并且向store分发action更新数据。react-redux和redux在项目中是配合使用的

react-redux由两个重要的属性
Provider：Provider是一个组件，它接受store作为props，然后通过context往下传，这样react中任何组件都可以通过contex获取store。
connect：用来连接store实例与组件，使得组件可以拿到store中的数据。

9.1、下载

npm install --save react-redux

9.2、使用

在项目根目录中引的index.js中，引入react-redux中的Provider包裹根组件，引入store实例。
注意不要忘记传递store，不然会报错

9.2、在需要使用store中数据的页面使用connect连接store与组件

connect在调用之后时一个高阶组件，connect中的aa为形参可以随便写，代表接收store中的数据。
使用connect连接完毕组件与store之后，store中的数据就映射到组件的props上了，this.props就代表的时store实例，也就是redux

其他组件也需要连接store的话，方法和9.2的方法一样

在phone页面调用

此截图就时调用的修改操作

10、action里处理异步—redux-thunk

需要安装中间件 redux-thunk ，redux-thunk可以增强dispatch的功能，让dispatch可以接收一个函数作为参数。

10.1、下载

npm install redux-thunk --save
npm install --save axios

10.2、引用

10、请求异步数据

注意：使用thunk后，如果return的是一个函数就会自动接收一个dispatch方法，axios请求结果获得后，再去走上面的reducer流程，将数据传递给action。
然后再页面中正常调用他就行

这样写代码看着有些冗余可以这样简化一下

10.3、在页面掉用store

下载：npm install --save react-redux

此时测试的话，可以发现数据时更新了，但是视图没更新数据。此时需要在根目录index.js中建通store中的数据变化。

解决办法：

在根目录中监听store中用store.subscribe()数据是否发生变化,如果发生变化重新渲染页面。