摘要：改造基于我们之前实现的简单对于它的函数进行处理。我们规定要把对象放入属性中。一个简易的异步处理方法已经实现了。但是反观对的改造没有什么统一性代码很难维护和扩展是可以配置中间件来扩展配置的。
文章地址
异步处理我们使用 redux 处理数据流时候, 一个比较令人头疼的问题就是关于异步操作。Action 发出以后，过一段时间再执行 Reducer，这就是异步。在哪个阶段处理异步, Reducer 作为一个纯函数, 不适合承担此类功能, 理论上也承担不了, Action 存放一个对象, 作为消息的载体自己更不能进行异步操作。想一想就发现可以在 dispatch 这个发送 Action 的方法上做文章。如果我们能在异步操作的不同阶段发送不同的 Action 我们就可以完成异步操作了。
改造 dispatch基于我们之前实现的简单 redux, 对于它的 dispatch 函数进行处理。使它具有处理我们异步逻辑的能力。
有时候看源码总能感觉到作者对代码逻辑处理的很优雅, 以及对于功能的可扩展性把握的很好，但是往往这些优美的代码，理解起来需要很多其他方面的知识基础, 这也是很多人看源码困难很大的原因。我们这里对与 redux 中间件的处理在后续再去讨论, 这里我们就以一种比较蠢的方法简单粗暴的实现我们想要的功能
加入 Thunk 能力
...
const dispatch1 = store.dispatch
store.dispatch = arg => {
if (typeof arg === "function") return arg(store.dispatch, getState)
dispatch1(arg)
}
...
这里逻辑异常简单, 先把原来的 dispatch 函数存储起来, 判断 dispatch 传入的参数类型, 如果参数类型为 function 则执行改函数并返回, 传入 store 的 dispatch 和 getState 作为参数, 使得 dispatch 具有处理函数参数的能力。
加入处理 Promise 能力其实上面的 thunk 我们已经有了处理异步的能力, 但是每次我们要自己去手动触发三个 action, 工作量还是很大的。现在 ajax 很多都会包装为 promise 对象, 因此我们可以对与 dispatch 增加一层判断, 使得它具有处理具有 promise 属性的 action 的能力。
...
const dispatch2 = store.dispatch
store.dispatch = action => {
if (isPromise(action.payload)) {
const { type, payload, params } = action
dispatch2({
type: `${type}_PENDDING`,
params
})
payload.then(
resolve => {
dispatch2({
type: `${type}_SUCCESS`,
content: resolve,
params
})
},
reject => {
dispatch2({
type: `${type}_ERROR`,
content: reject,
params
})
}
)
} else {
dispatch2(action)
}
}
...
我们规定 action 要把 promise 对象放入 payload 属性中。当接收到 payload 属性为 promise 对象的 action 时候, 我们这里硬编码直接触发该 type 加 _PENDDING 事件。等到该 promise 状态改变后, 我们根据它成功与否分别触发 _SUCCESS 和 _ERROR 事件, 这样我们就可以把异步逻辑包装为 promise 对象放在 action 中, 然后我们在 reducer 中分别处理这几种类型的事件即可。
测试和思考我们现在可以在项目(reacts-ggsddu)中分别去 dispatch 一个函数和一个带有 promise 对象的 action 可以看到分别的请求效果。 一个简易的异步处理方法已经实现了。
但是反观对 dispatch 的改造没有什么统一性, 代码很难维护和扩展, redux 是可以配置中间件来扩展配置的。我们后面再去研究。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/89380.html
摘要：在函数式编程中，异步操作修改全局变量等与函数外部环境发生的交互叫做副作用通常认为这些操作是邪恶肮脏的，并且也是导致的源头。 注：这篇是17年1月的文章，搬运自本人 blog... https://github.com/BuptStEve/... 零、前言 在上一篇中介绍了 Redux 的各项基础 api。接着一步一步地介绍如何与 React 进行结合，并从引入过程中遇到的各个痛点引出 ...
摘要：举例来说一个异步的请求场景，可以如下实现任何异步的逻辑都可以，如等等也可以使用的和。实际上在中，一个就是一个函数。 书籍完整目录 3.4 redux 异步 showImg(https://segmentfault.com/img/bVyou8); 在大多数的前端业务场景中，需要和后端产生异步交互，在本节中，将详细讲解 redux 中的异步方案以及一些异步第三方组件，内容有： redu...
摘要：是官方文档中用到的异步组件，实质就是一个中间件，简单来说就是一个封装表达式的函数，封装的目的是延迟执行表达式。这时我们需要对一般异步中间件进行处理。 曾经前端的革新是以Ajax的出现为分水岭，现代应用中绝大部分页面渲染会以异步流的方式进行。在Redux中，如果要发起异步请求，最合适的位置是在action creator中实现。但我们之前了解到的action都是同步情况，因此需要引入中间...
摘要：写法一，返回值是一个对象。我们已经知道，中间件只关注函数的传递，而且也不关心函数的返回值，所以只需要让认识这个函数就可以了。 react的FLUX数据流一直搞不清楚，他不像Angular的双向数据绑定，做一个model获取数据，然后通过controller来管理view上的数据显示就可以了。单项数据流引入了太多的概念，state、action、reducer、dispatch。就算看的...
摘要：相关状态父组件传递给子组件的状态。外部状态状态是可以从视图库中移出来的，然后可以使用提供者消费者模式把状态重新连接回视图库。重新设计在我看来，重写是有其必要性的，至少有以下个方面可以改进得更友好。 Redux 学习起来很困难？写起代码来很啰嗦？一起来看看 Rematch 的作者对 Redux 的思考和简化吧~ 原文：《Redesigning Redux》, Shawn McKay 都过...
阅读 2845·2021-11-16 11:55
阅读 2585·2021-09-29 09:34
阅读 3366·2021-09-01 14:21
阅读 3710·2019-08-29 12:36
阅读 675·2019-08-26 10:55
阅读 3833·2019-08-26 10:20
阅读 1008·2019-08-23 18:19
阅读 1178·2019-08-23 17:56
