redux异步编程

2021-01-14  本文已影响0人  变量只提升声明不提升赋值

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。

上一篇下一篇

猜你喜欢

热点阅读