Redux Thunk

thunk 是一种特定类型的 Redux 函数，可以包含异步逻辑。一个内部 thunk 函数，它以 dispatch 和 getState 作为参数

安装 redux-thunk

xxxxxxxxxx
npm install --save redux-thunk

引入 redux-thunk

xxxxxxxxxx
import { configureStore,applyMiddleware } from "@reduxjs/toolkit"
import { userReducer } from "./reducers/userReducers"
import { countReducer } from "./reducers/countReducers"
import thunk from "redux-thunk"
const store = configureStore({
    reducer:{
        user:userReducer,
        count:countReducer
    }
},applyMiddleware(thunk))
export default store

redux-thunk 可以在 actions 中实现

xxxxxxxxxx
export const asyncIncrementAction = (dispatch,getState) =>{
    setTimeout(() =>{
        dispatch(incrementAction())
        console.log(getState())
    },2000)
}

像使用普通 action creator 一样使用：

xxxxxxxxxx
dispatch(asyncIncrementAction)

如果需要传递参数，可以如下实现

xxxxxxxxxx
export const asyncIncrementAction = payload => (dispatch, getState) => {
    setTimeout(() => {
        console.log(payload)
        dispatch(incrementAction())
    }, 2000)
}

调用传递参数

xxxxxxxxxx
dispatch(asyncIncrementAction(10))