美文网首页
redux异步编程

redux异步编程

作者: 变量只提升声明不提升赋值 | 来源:发表于2021-01-14 14:37 被阅读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。

    相关文章

      网友评论

          本文标题:redux异步编程

          本文链接:https://www.haomeiwen.com/subject/ijdvaktx.html