在 Redux 的世界中,Redux action 返回一个 JS 对象,被 Reducer 接收处理后返回新的 State,这一切看似十分美好。整个过程可以看作是:
view -> actionCreator -> action -> reducer -> newState ->(map) container component
但是真实业务开发我们需要处理异步请求,比如:请求后台数据,延迟执行某个效果,setTimout, setInterval 等等,我们希望在异步请求的时候,action 能够这样处理:
view -> asyncAction -> wait -> action -> reducer -> newState -> container component
这里 action 不再是同步的,而是具有异步功能,当然因为依赖于异步 IO,也会产生副作用。这里就会存在一个问题,我们需要发起两次 action 请求,这好像我们又得将 dispatch 对象传入函数中,显得不够优雅。同步和异步的调用方式截然不同:
- 同步情况:store.dispatch(actionCreator())
- 异步情况: asyncAction(store.dispatch)
好在我们有 Redux 中间件机制能够帮助我们处理异步 action,让 action 不再仅仅处理同步的请求。
除了可以自己造轮子,也可以借用别人的智慧,比较适合处理异步请求的redux中间件有
- redux-thunk
- redux-promise
- redux-saga
参考
https://juejin.im/entry/59fd15b951882534af2552af