redux-thunk-基本使用
作用
redux-thunk 中间件可以处理函数形式的 action。因此,在函数形式的 action 中就可以执行异步操作代码,完成异步操作。
拓展了功能,支持函数形式的 action
- 之前
const action1 = {type: 'todos/add', payload: '学习redux'}
dispatch(action1)
- 之后
const action1 = async (dispatch) =>{
const res = await 异步动作()
dispatch({type: 'todos/add', payload: '学习redux'})
}
dispatch(action1)
使用
- 安装:npm i redux-thunk
- 在store/index.js
1.导入 redux-thunk , applyMiddleware
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
2.调用applyMiddleware将 thunk 添加到中间件列表中
const store = createStore(rootReducer, applyMiddleware(thunk))
3.修改 action creator,返回一个函数,其形参就是redux的dispatch
const addTodo = (name)=> {
return async (dispatch) =>{
const res = await 异步动作()
dispatch({type: 'todos/add', payload: name})
}
}
dispatch(addTodO('学习redux'))