redux本身是不支持异步编程的。但是用上redux之后,最好所有的异步操作都放在action中去做。这个时候就需要在redux中做异步编程。
首先安装一个中间件
npm install redux-thunk --save
redux库本身提供了一个调用中间件的方法applyMiddleware
import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
const store = createStore(counter,applyMiddleware(thunk))
在初始化store的文件中将这个方法引入进来,同时也将thunk中间件引入进来。
在初始化store的时候除了传一个reduce之外,还可以传第二个参数,这个参数就是处理中间件的函数的返回结果。
所以我们在第二个参数的位置去调用applyMiddleware方法,并且将thunk作为次方法的参数传入
这样以来,就可以在action中去处理异步操作了
//增加的action
export const add = (number)=>({type:'add',data:number})
//减少的action
export const del = (number)=>({type:'del',data:number})
//异步的action
export const addAsync = (number)=>{
return dispatch=>{
setTimeout(()=>{
number++
dispatch(add(number))
},1000)
}
}
在action中定义一个异步action的方法,一般的action都是返回一个对象。但是异步的action返回的是一个函数。这个函数有一个dispatch参数。当我们在函数体中调完后台接口之后,我们就可已通过dispatch去调用一个同步的action,去产生一个新的state。
网友评论