Redux:异步操做

最近状态不太好，学习redux的异步操做花的时间比想象的多，这里尽可能清晰简要的表述一下在redux中怎么实现异步操做。

先回顾一下同步操做：

咱们用redux执行同步的时候，都是先发起一个dispatch（actionCreator()）

    1.先在actionCreator()中生成一个action对象。

    2.由dispatch方法将action传到reducer。

    3.reducer中计算新state

    4.新state保存到store中

    5.由于容器组件将state做为props传给展现组件，state更新后，展现组件渲染更新的部分（由于props更新了）

如何实现异步操做：

    当咱们发起一个异步任务时，咱们会注意两个时间点：

    1.发起异步任务的时刻（pending）

    2.异步任务执行完的时刻（success || failure）

    ！！在咱们发起异步操做，即pending的时候，咱们每每要在页面上做出提示，告诉用户“资源正在加载，请等候”。

    ！！在异步操做完成后，咱们也每每要将返回的data在页面上渲染，可能数据已经成功获取，也可能获取失败。

因此，在执行异步操做的时候。一个基本的思路是：

    1.开始执行异步操做的时候，发出一个action，在页面上提示“资源正在加载”

    2.等异步执行完后，再发起一个action，将须要的东西渲染出来。

因此，咱们须要准备三个action：

{type:fetching}  //执行异步期间

{type:fetching-success,result:responseText }  //异步成功

{type:fetching-error,error:error}  //异步失败

好了，咱们如今已经明确，在发起异步的时候一个action，执行完异步后一个action。可是，具体一个异步怎么操做呢？

我一开始的想法是在组件中的自定义方法里，写异步的代码。发起ajax或promise，在回调里dispatch(action)来更新视图。但文档里给出了不同的思路。

它将异步操做的代码封装到一个action creator的返回值中！！！

nani？？？？

这大概是为了贯彻redux的理念。app中的各部分都有纯粹而限定的职责，reducer只负责计算新state、P组件只负责渲染、C组件只负责获取update后的state和disptach方法传递给P组件。

而异步操做，一样被归类为一种action（action可能会改变state）。因此异步操做的代码被放到action creator的返回值里。

可是dispatch方法只能接收js对象呀。

这就须要用到一个中间件----redux-thunk

咱们知道，在使用dispatch方法传送一个action给reducer的时候，这个过程是同步的。一旦reducer获取action，就一路执行，直到state更新。

因此咱们要在action到达reducer以前，实现异步的代码。这就用到了中间件redux-thunk。

redux-thunk让dispatch方法能够接收函数做为参数，并执行判断：

  若是是js对象，直接送到reducer。

  若是是函数，执行它（至关于截获了它）。因此这个函数咱们设计为一个异步操做，先发出一个action表示“正在异步”，等操做完成再dispatch一次action表示“异步完成”

下面是实例：

index.js

1 import { createStore, applyMiddleware } from 'redux';
2 import thunk from 'redux-thunk';
3 
4 let store = createStore(
5   Reducer,
6   applyMiddleware(thunk)
7   )

actionCreator.js

 1 export const fetchWeather = (cityCode)=>{
 2   return (dispatch)=>{
 3   const apiurl = `/data/cityinfo/${cityCode}.html`;
 4   dispatch(fetchWeatherStarted());
 5   console.log('now show waiting')
 6   fetch(apiurl).then((response)=>{
 7   if(response.status!==200){
 8       throw new Error('Fail');
 9   }
10   response.json().then((responseJson)=>{
11     dispatch(fetchWeatherSuccess(responseJson.weatherinfo));
12 
13   }
14       ).catch((error)=>{
15           throw new Error('Invalid json response');
16       });
17 
18   }).catch((error)=>{
19     dispatch(fetchWeatherFailure);
20   }
21       );
22   };
23   }

在actionCreator.js中，fetchWeather函数返回的不是一个js对象，而是一个函数

这个函数的能够有两个参数dispatch和getState，都是store的成员方法。这个函数执行的是一个异步操做，fetch一段数据，在fetch以前发出一个pending action，成功后再发出一个success action。

中间件其实有不少，还有redux-promise等。

redux-thunk是最经常使用的异步中间件，它让disptach能接收函数做为参数，使得咱们能在actionCreator中返回一个函数，在这个函数中设计异步操做，并在异步操做的开始和结束时刻发送action来控制视图的渲染。

 附上一个知乎上的问题：Redux有哪些最佳实践?