redux-thunk-基本使用

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)

使用

1. 安装：npm i redux-thunk
2. 在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'))