深入认识Redux(四)
注1:本文主要根据 "自述|redux中文文档" 学习的个人总结记录。也是是为了更快更好的学习和接受redux的操作,更好的应用的项目中。原文档地址:http://www.redux.org.cn/ 异步Action之前在开发的时候,关于在action creator中传入dispatch,然后通过异步请求后再dispatch action的方式触发reducer改变state,一直没有弄明白dispatch是如何传到action creator中的,自从研究文档后才大致弄清楚了。 export function indexQuestion(data) { return (dispatch) => { Apis.indexQuestion(data) //发起一个接口请求 .then((res)=> { dispatch({ type: Types.GET_INCEX_DATA,store: res.data }); },(err)=> { dispatch({ type: Types.ERROR_MESSAGE }); }) } } 从上面的代码我们要注意到是发起请求的时候和请求收到响应的时候,在这两个时候都可以通过dispatch去改变state状态。如上实例代码主要是在请求响应后分别对成功和失败做了处理。 那么我们是如何将action和异步请求结合到一起的呢?标准的做法就是通过redux-thunk中间件(熟悉express的同学应该都了解什么叫做中间件吧)。通过使用指定的中间件,action creator除了返回普通的action对象,现在还可以返回函数,这个action函数就称为了“thunk”(什么叫thunk我还不太清楚....希望有人帮忙解释下) 那么中间件是起什么作用的呢?上面说了引入中间件后,action创建函数可以在函数体内返回其他函数了。那么当action中返回的其他函数的时候就会被Redux Thunk中间件执行,*会把dispatch方法通过参数的形式传给该函数。如下: export function getMajor(){ return (dispatch) => { //返回一个函数,dispatch通过参数的形式传入 Apis.major().then((res)=>{ dispatch({ //请求成功的时候dispatch action改变state type: Types.MAJOR_INFO,store: res.data }) },(error) => { dispatch({ //请求失败的时候dispatch另外一个action改变state type: Types.ERROR_MESSAGE,error }) }) } } 我们是如何在 dispatch 机制中引入 Redux Thunk middleware 的呢?我们使用了 applyMiddleware(),如下: //这是官方文档中例子,稍微删掉一些这样看起来更清楚。 import thunkMiddleware from 'redux-thunk' //引入thunk import { createStore,applyMiddleware } from 'redux' import { selectSubreddit,fetchPosts } from './actions' import rootReducer from './reducers' const store = createStore( rootReducer,applyMiddleware( thunkMiddleware,// 允许我们 dispatch() 函数 ) ) 如上,通过applyMiddleware引入了thunkMiddleware,这样就可以在action中再次dispatch action。 这可以让我们逐步开发复杂的异步控制流,同时保持代码整洁如初。 中间件(Middleware)引用文档中的一句话,它提供的是位于 action 被发起之后,到达 reducer 之前的扩展点。你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- c# – ASP.NET应用程序中的WebRequest失败与“414请求URI太
- Cannot perform conversion to XML from legacy HTML:
- 如何在swift中使用objective-c-runtime的object_getIvar和o
- vb.net – 无法导入`Imports System.Web.Script.Serializat
- XStream生成简单的XMl文件2
- Open Flash Chart 扩展实现
- 数据回滚:基于时间的查询(AS OF TIMESTAMP)和(AS OF ACN
- VB.net版机房收费系统——VS报表制作及功能实现中的问题及解
- 使用C#将ESC命令发送到打印机
- ruby-on-rails – Rspec系统测试在单独运行时通过,在使用整