网站备案查询工信部官网,网站建设费用推荐网络专业,网站建设规划书参考模板,兴化网站制作上两篇文章叙述的都是同步操作#xff0c;每当 dispatch action 时#xff0c;state 会被立即更新。但是实际应用中#xff0c;我们有很多操作执行后#xff0c;过一段时间#xff0c;才会得到结果。那么怎么处理这种情况呢#xff1f;先熟悉一个概念中间件本质就是一个通…上两篇文章叙述的都是同步操作每当 dispatch action 时state 会被立即更新。但是实际应用中我们有很多操作执行后过一段时间才会得到结果。那么怎么处理这种情况呢先熟悉一个概念中间件本质就是一个通用函数可以在程序的任何执行处介入从而将处理方法扩展到现有系统上。在store.dispatch(action) 执行时候打印日志这就是一个简单的中间件let next store.dispatch;store.dispatch action {next(action);console.log(state after dispatch, getState())}引入中间件 redux-thunkredux-thunk中间件,允许action creator返回一个函数这个函数会接收dispath和getState为参数。看下面三种不同的actionconst INCREMENT_COUNTER INCREMENT_COUNTER;普通的,返回一个对象function increment() {return {type: INCREMENT_COUNTER};}异步的返回一个函数function incrementAsync() {return dispatch {setTimeout(() {// Yay! Can invoke sync or async actions with dispatchdispatch(increment());}, 1000);};}带条件的返回一个函数function incrementIfOdd() {return (dispatch, getState) {const { counter } getState();if (counter % 2 0) {return;}dispatch(increment());};}使用中间件 redux-thunk需求进入页面之后点击某个按钮获取用户投资总额。。。分析异步请求有3个关键action开始请求--一般用于呈现加载进度条请求成功--关闭进度条加载数据请求失败--关闭进度条展示错误信息import { createStore, applyMiddleware } from redux;import thunk from redux-thunk; //导入thunkimport rootReducer from ./reducers/index;// Note: this API requires redux3.1.0const store createStore(rootReducer,applyMiddleware(thunk)//激活thunk中间件);//一个异步请求function fetchAmount() {return fetch(https://www.renrendai.com/getAmount?userId123)}//通知 reducer 请求开始的 actionrequestPost(){return{type: REQUEST_POSTS,isFetch:true //进度条相关}}//通知 reducer 请求成功的 actionreceviePostOnSuccess( data){return{type: RECEIVE_POSTS,isFetch:false,amount: data.amount}}//通知 reducer 请求失败的 action。receviePostOnError( message){return{type: RECEIVE_POSTS,isFetch:false,errorMsg:message}}//异步请求action 【将上面3个基础的action整合】function getAmount(){retrun (dispath){// 首次 dispatch更新应用的 state 来通知API 请求发起了dispatch(requestPosts())//异步请求后端接口return fetchAmount().then(datadispath(receviePostOnSuccess(data)),error dispatch(receviePostOnError(error)))}}也很容易理解吧~~~本文档是将最基础的使用方法提炼呈现真正的react-redux博大精深如果想继续深究就赶紧找一个简单的项目开始练手吧。参考文档
