《React-Native系列》27、 Redux的异步数据流
来源:互联网 发布:python dill 编辑:程序博客网 时间:2024/06/06 16:25
但是,在大多数的前端业务场景中,需要和后端产生异步交互,譬如:网络api的请求。
Redux中怎么来实现异步的数据流呢?
异步Action
通常我们创建的Action如下:
我们来创建一个异步的Action:
在异步Action中,我们diapatch了一个requestPosts 的Action,同时根据fetch的结果,dispatch了不同的Action。
实际上,异步Action返回的是一个function。
当 action creator 返回函数时,这个函数会被 Redux Thunk middleware 执行。
这个函数并不需要保持纯净;它还可以带有副作用,包括执行异步 API 请求。这个函数还可以 dispatch action,就像 dispatch 前面定义的同步 action 一样。
Middleware
Middleware提供的是位于 action 被发起之后,到达 reducer 之前的扩展点。 你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。
一个 middleware 的结构 ,其核心的部分为
给个例子:
其实目前已经有很多第三方 redux 组件支持异步 action,其中如:
- redux-thunk
- redux-promise
- redux-saga
redux-thunk
redux-thunk 是 redux 官方文档中用到的异步组件,实质就是一个 redux 中间件,thunk 听起来是一个很陌生的词语,先来认识一下什么叫 thunk
A thunk is a function that wraps an expression to delay its evaluation.
简单来说一个 thunk 就是一个封装表达式的函数,封装的目的是延迟执行表达式
redux-thunk 是一个通用的解决方案,其核心思想是让 action 可以变为一个 thunk ,这样的话:
同步情况:dispatch(action)
异步情况:dispatch(thunk)
我们已经知道了 thunk 本质上就是一个函数,函数的参数为 dispatch。
我们来看一下redux-thunk的源码:
实现的逻辑如下:
如果 action 也就是一个 thunk,执行 action 相当于执行了异步逻辑action(dispatch, getState, ...)
action 中执行 dispatch,开始新的 redux 数据流,重新回到最开始的逻辑(thunk 可以嵌套的原因)
把执行的结果作为返回值直接返回,直接返回并没有调用其他中间件,也就意味着中间件的执行在这里停止了
如果不是函数直接调用其他中间件并返回。
参考:https://zhuanlan.zhihu.com/p/21398212
http://cn.redux.js.org/docs/advanced/AsyncActions.html
- 《React-Native系列》27、 Redux的异步数据流
- 《React-Native系列》27、 Redux的异步数据流
- 《React-Native系列》25、 详解Redux的connect方法
- 《React-Native系列》25、 详解Redux的connect方法
- react-native 简单的react-redux创建
- react-redux,redux,react native之间的关系
- [React Native]Redux的基本使用方式
- [React Native]Redux的基本使用方式
- 基于 Redux 的 React Native 应用架构
- React-Native Redux的基本使用方式
- react native redux
- react native redux counter
- react-native redux debug
- React Native集成Redux
- React Native 之 Redux
- react native and redux
- react-native redux学习心得
- react-native + redux 实践
- Cisco访问控制列表的配置
- 经典面试题之 —— 冒泡排序
- Primer Plus 第三章总结
- JavaWeb(二)
- 第一周总结
- 《React-Native系列》27、 Redux的异步数据流
- java——字节流与字符流
- GC ROOT的真实含义
- 推荐两个安装Cygwin时的快速源(163和souhu)
- 深入理解JavaScript中的for循环
- ubuntu安装python3.5
- 《React-Native系列》28、 RN之AsyncStorage
- Android NDK初入
- Verilog HDL学习(二)