用户的使用方式非常简单 用户之间没有协作 不需要与服务器大量交互,也没有使用 WebSocket 视图层(View)只从单一来源获取数据 从组件角度看,如果你的应用有以下场景,可以考虑使用 Redux。...从简单的 react-thunk 到 redux-promise 再到 redux-saga等等,都代表这各自解决redux异步流管理问题的方案 4.1 、redux-thunk redux-thunk...尽管redux-thunk很简单,而且也很实用,但人总是有追求的,都追求着使用更加优雅的方法来实现redux异步流的控制,这就有了redux- promise。...4.2、redux-promise 使用redux-promise中间件,允许action是一个promise,在promise中,如果要触发action,则通过调用resolve来触发 4.3、redux-sage...五、使用redux-dev-tools插件调试redux 5.1、下载插件 首先在谷歌商店搜索redux-dev-tools,下载这个插件,然后重启浏览器 在redux中的store文件进行配置 若是JS
action 时打印状态的变化以及 action 的信息: redux-thunk import thunk from 'redux-thunk'; import { createLogger...这种异步思路就是使用 Action Creator 返回一个函数,然后使用 redux-thunk 让 dispatch 能够接受一个函数作为参数。...redux-promise import thunk from 'redux-thunk'; import { createLogger } from 'redux-logger'; import...logger) // 按照严格的循序 ); 上一种方法是使用 Action Creator 返回函数来操作异步,使用 redux-promise 可以让它返回一个 promise 对象,可以使用...{ dispatch(deleteUser(index)) }, 2000) })) } 使用 redux-promise 让它能够返回一个 使用 promise ,接着我们调用
redux比较常用的中间件有 redux-saga、redux-thunk、redux-promise等 都是为了解决dispatch action异步处理问题 redux中间件 对redux应用实现异步...使用 thunk 等中间件可以帮助在 Redux 应用中实现异步性。...可以将 thunk 看做 store 的 dispatch() 方法的封装器;我们可以使用 thunk action creator 派遣函数或 Promise,而不是返回 action 对象。...) // 应用thunk中间件 ); // 在对dispatch函数进行映射时 action creator 可以直接返回一个函数 不用直接返回action 这使得里面可以写异步操作 先去请求接口 在去...之精髓 本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。
中间件的返回值的处理 import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import...中间件 redux-promise 中间件 既然 Action Creator 可以返回函数,当然也可以返回其他值。...另一种异步操作的解决方案,就是让 Action Creator 返回一个 Promise 对象。 这就需要使用redux-promise中间件。...写法一,返回值是一个 Promise 对象。...作为函数,mapStateToProps执行后应该返回一个对象,里面的每一个键值对就是一个映射。请看下面的例子。
怎么才能 Reducer 在异步操作结束后自动执行呢?这就要用到新的工具:中间件(middleware) ?...因此,异步操作的第一种解决方案就是,写出一个返回函数的 Action Creator,然后使用 redux-thunk 中间件改造 store.dispatch。...六、redux-promise 中间件 ---- 既然 Action Creator 可以返回函数,当然也可以返回其他值。...另一种异步操作的解决方案,就是让 Action Creator 返回一个 Promise 对象。 这就需要使用 redux-promise 中间件。...写法一,返回值是一个 Promise 对象。
不过,我觉得这是从结果出发找造这个轮子的原因,并不能从需求层面解释这个中间件到底解决了什么问题。 本文希望从解决问题的角度来推导 redux-thunk 诞生的原因。...解耦 上面的代码在很多业务里非常常见,常见到我们根本不需要什么 redux-thunk,redux-saga 来处理。...会发现 redux-thunk 并没有解决什么实际问题,只是提供了一种写代码的 “thunk 套路”,然后在 dispatch 的时候自动 “解析” 了这样的套路。 那有没有别的 pattern 呢?...目前来说,redux-thunk, redux-saga 以及 redux-loop 是比较常用的 “pattern 解析器”,他们自己都提供了一套属于自己的 pattern,让开发者在自己的框架里随意...要不要使用 redux-thunk? 如果你在第 1 步的时候就觉得依不依赖 dispatch 对我都没什么影响,在组件里直接用 dispatch 也很方便呀。
怎么才能 Reducer 在异步操作结束后自动执行呢?这就要用到新的工具:中间件(middleware)。...因此,异步操作的第一种解决方案就是,写出一个返回函数的 Action Creator,然后使用redux-thunk中间件改造store.dispatch。...六、redux-promise 中间件 既然 Action Creator 可以返回函数,当然也可以返回其他值。...另一种异步操作的解决方案,就是让 Action Creator 返回一个 Promise 对象。 这就需要使用redux-promise中间件。...写法一,返回值是一个 Promise 对象。
没关系,稍后我们自己实现完基础的 redux 后在回头来看我相信你会清晰的。...(action) } 复制代码 上述我们简化了对应中间件需要 compose 的代码,注意当我们调用 compose 时比如: compose(logger,thunk,promise) 中间件的组合顺序是从右往左...此时在 composeFn 内部对于 [logger,thunk,promise] 使用 for 循环进行了逆序调用。...经过 for 循环第一次迭代,此时 args 从 store.disaptch 变成了 promise 中返回的函数(这里我们称为promiseAction 函数) (action) => { console.log...并且传入的 args 参数(此时args指向上一次 promise middleware 处理后的返回函数): // 调用该函数 next 即使 args ,指向上一次处理后返回的函数 const thunk
异步逻辑应放置在 Redux中间件中处理 !! Middleware !! (就是下面要提到的redux-thunk、redux-promise) ?...总结: redux-thunk 允许我们 dispatch 一个包含异步处理逻辑函数(thunk);优点是我们可以借助这种简单的机制在 redux 中处理异步逻辑;缺点是这会让 action 变的不纯粹...redux-promise应用示例 ? 总结: redux-promise 虽然比 redux-thunk 封装的更深,但仍然存在几个问题: a....业务逻辑实质还是集中在 action 中处理,变更了 action 原本的含义; ?...异步业务逻辑被集中在 Saga 中管理; c. 没有修改 action 原本的含义; d.
本文会讲解Redux官方实现的异步解决方案----Redux-Thunk,我们还是会从基本的用法入手,再到原理解析,然后自己手写一个Redux-Thunk来替换它,也就是源码解析。...Redux-Thunk前我们dispatch的action必须是一个纯对象(plain object),使用了Redux-Thunk后,dispatch可以支持函数,这个函数会传入dispatch本身作为参数...(increment()); }, 1000); 这样写同样可以在1秒后发出增加的action,而且代码还更简单,那我们为什么还要用Redux-Thunk呢,他存在的意义是什么呢?...你可能会发现很多例子都返回了Promise,这个不是必须的,但是用起来却很方便。Redux并不关心你的thunk返回了什么值,但是他会将这个值通过外层的dispatch()返回给你。...这就是为什么你可以在thunk中返回一个Promise并且等他完成: dispatch(someThunkReturningPromise()).then(...)
Redux Thunk 是一个中间件,它允许 Redux 返回函数而不是 actions。这就允许你在延迟处理 actions 的时候结合 promises 使用。...借助 Redux Thunk,我们可以异步 dispatch 这些操作并返回 promise 处理的结果。...action 对象应该被返回,因为 action 是一个对象。Redux-thunk 允许一个 action creator 返回一个函数!现在,我们可以做任何异步工作。...怎么使用 Redux Thunk: 构建一个购物车 在本教程中,我们将使用 Redux Thunk 开发一个简单的购物车功能,更好地明白 Thunk 怎么工作。...redux-thunk 中间件后,你派发的所有 actions 都会经过上面代码流程。
比如 redux-thunk 或 redux-promise,分别是使用异步回调和 Promise 来解决异步 action 问题的。...thunk就是简单的action作为函数,在action进行异步操作,发出新的action。...**redux-thunk 和 redux-promise 刚好就是代表这两个面。 当业务逻辑多且复杂的时候会发生什么情况呢?...redux-saga的优势 Redux 处理异步的中间件 redux-thunk 和 redux-promise,当然 redux 的异步中间件还有很多,他们可以处理大部分场景,这些中间件的思想基本上都是把异步请求部分放在了...vuex 真正限制你的只有 mutation 必须是同步的这一点(在 redux 里面就好像 reducer 必须同步返回下一个状态一样)。
有哪些异步处理中间件 9.3. redux-thunk 9.4. redux-promise 9.5. redux-promise-middleware 9.6. 总结一下 10....上述功能由 getUnexpectedStateShapeWarningMessage 负责实现 reducer 在处理不属于自己的 Action 时,未返回当前 state 上述功能由 assertReducerShape...redux-promise:基于Promise的异步处理; redux-promise-middleware:还是Promise; redux-saga:最优雅!最复杂!...9.3. redux-thunk redux-thunk 中间件扩展了 redux 的 dispatch 功能,它允许你 dispatch 一个函数(即:thunk),异步逻辑就放在这个函数中处理; 源码...: redux-thunk 允许 dispatch 一个 thunk 函数; store.dispatch((dispatch, getState) => { ... }) redux-promise
call 有阻塞地调用 saga 或者返回 promise 的函数,只在触发某个动作。 takeEvery 循环监听某个触发动作,我们通常会使用while循环替代。...---- 最近将项目中redux的中间件,从redux-thunk替换成了redux-saga,做个笔记总结一下redux-saga的使用心得,阅读本文需要了解什么是redux,redux中间件的用处是什么...这些Effect执行后,当函数resolve时返回一个描述对象,然后redux-saga中间件根据这个描述对象恢复执行generator中的函数。...从工作流中,我们发现redux-saga执行完副作用函数后,必须发出action,然后这个action被reducer监听,从而达到更新state的目的。...4.redux-saga实现一个登陆和列表样例 接着我们来实现一个redux-saga样例,存在一个登陆页,登陆成功后,显示列表页,并且,在列表页,可 以点击登出,返回到登陆页。
在 Redux 中的 action 创建函数只是简单的返回一个 action: function addTodo(text) { return { type: ADD_TODO, text...在 default 情况下返回旧的 state。遇到未知的 action 时,一定要返回旧的 state。...我们可将异步Action简答理解为:在Action中进行异步操作等操作返回后再dispatch一个action。...使用redux-thunk npm install --save redux-thunk import thunk from 'redux-thunk' let middlewares = [...像 redux-thunk 或 redux-promise 这样支持异步的 middleware 都包装了 store 的 dispatch() 方法,以此来让你 dispatch 一些除了 action
总的来说,thunk 是一种函数,其返回值也是一个函数。...提到 thunk,你可能马上就会想到 redux-thunk,其对自己的定义如下: Redux Thunk middleware allows you to write action creators...从同步的角度看,thunk 是一种函数,这种函数已经包含了所有你需要的值,你不需要传入任何参数,仅仅需要调用它,它就会将值返回给你。...async 函数只有在结束时,才会返回的是一个 Promise。我们无法控制其中间状态,而 generator 返回的是迭代器,迭代器让你有充分的控制权。...也许在熟悉了各种异步模式后,遇到了具体的问题,第一时间想到的就会是最合适的方式。 JS 中是怎么实现异步的 前面我们提到,在 Promise 之前,JavaScript 语言本书是没有异步这个概念的。
否则会出现惊喜 call generator 只能接受到返回值 redux-saga初使用 安装: yarn add redux-saga store.js import { createStore..., combineReducers, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import createSagaMiddleware...的dispatch 当put一个action后。...reducer中就会计算新的state并返回 注意: put也是阻塞effect call 解释: call函数 调用其他函数 调用的函数可以是Generator 或者是返回一个promise的简单函数...promise.all race 解释: yield race({post: call(1), timeout: call(2)}) 谁先返回谁先有值 cancel 解释: fork产生的任务 可以使用
那怎么才能 Reducer 在异步操作结束后自动执行呢?Redux 引入了中间件 Middleware 的概念。...显然,用 Redux 处理异步,可以自己写中间件来处理,当然大多数人会选择一些现成的支持异步处理的中间件。比如 redux-thunk 或 redux-promise 。...Redux-promise redus-promise 和 redux-thunk 的思想类似,只不过做了一些简化,成功失败手动 dispatch 被封装成自动了: const FETCH_DATA =...redux-thunk 和 redux-promise 刚好就是代表这两个面。 redux-thunk 和 redux-promise 的具体使用就不介绍了,这里只聊一下大概的思路。...大部分简单的异步业务场景,redux-thunk 或者 redux-promise 都可以满足了。 上面说的 Flux 和 Redux,和具体的前端框架没有什么关系,只是思想和约定层面。
本文用以记录从调研Redux Saga,到应用到项目中的一些收获。...在最初的调研中redux-thunk是首先考虑的,redux-thunk是在action作用到reducer之前触发一些业务操作。刚好起到控制层的作用。...在浏览了很多比较文章后,最终,我们选择了redux-saga来处理应用的控制层。...拿到后端返回状态 (promise so easy…) 隐藏提示信息 (这个有点难度,不过难不倒我,我给组建加一个控制属性) 更新redux store (dispatch咯。。。)...call方法 call有些类似Javascript中的call函数, 不同的是它可以接受一个返回promise的函数,使用生成器的方式来把异步变同步。
领取专属 10元无门槛券
手把手带您无忧上云