如何不使用createSlice实现createAsyncThunk的使用方法

Redux Toolkit 提供的createAsyncThunk本身和createSlice没有强绑定关系，完全可以独立配合手写 reducer 使用，具体实现步骤如下：

1. 定义异步Thunk #

直接使用createAsyncThunk封装axios异步请求逻辑即可，无需和createSlice关联：

// 在你原有reducer的同级文件中新增以下代码
import { createAsyncThunk } from '@reduxjs/toolkit'
import axios from 'axios'

// 第一个参数为action的type前缀，第二个参数为实际执行的异步函数
export const fetchMyData = createAsyncThunk('myData/fetchMyData', async (requestParams) => {
  // requestParams是你dispatch这个thunk时传入的自定义参数，不需要可以省略
  const response = await axios.get('你的业务接口地址', { params: requestParams })
  // 接口返回值会作为请求成功状态的action.payload
  return response.data
})

2. 调整原有reducer适配Thunk状态 #

createAsyncThunk会自动生成三种状态的action：请求中(pending)、请求成功(fulfilled)、请求失败(rejected)，直接在你手写的switch case中添加对应处理逻辑即可，你还可以新增加载、错误状态方便页面做交互处理：

// 调整原有initialState
export const initialState = {
    myData: [],
    loading: false,
    error: null
};

const myDataReducer = (state = initialState, action) => {
    switch (action.type) {
        case setMyData.type:
            return {
                ...state,
                myData: action.payload
            };
        // 新增thunk三种状态的处理逻辑
        case fetchMyData.pending.type:
            return {
                ...state,
                loading: true,
                error: null
            };
        case fetchMyData.fulfilled.type:
            return {
                ...state,
                loading: false,
                myData: action.payload
            };
        case fetchMyData.rejected.type:
            return {
                ...state,
                loading: false,
                error: action.error.message
            };
        default:
            return state;
    }
};

export default myDataReducer;

3. Store配置说明 #

你原有的combineReducers逻辑完全可以复用，按照你使用的store创建方式选择对应配置即可：

使用Redux Toolkit的configureStore（推荐） #

configureStore默认已经集成了thunk中间件，不需要额外配置：

// store配置文件
import { configureStore, combineReducers } from '@reduxjs/toolkit'
import myDataReducer from './你的reducer文件路径'

const rootReducer = combineReducers({
  myData: myDataReducer
  // 其他业务reducer可继续在此添加
})

const store = configureStore({
  reducer: rootReducer
})

export default store

使用旧版createStore #

需要手动引入注册thunk中间件：

import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import myDataReducer from './你的reducer文件路径'

const rootReducer = combineReducers({
  myData: myDataReducer
})

const store = createStore(rootReducer, applyMiddleware(thunk))
export default store

4. 组件中调用异步Thunk #

和普通同步action的使用方式一致，直接dispatch即可：

import { useDispatch, useSelector } from 'react-redux'
import { fetchMyData } from './你的reducer文件路径'

function MyComponent() {
  const dispatch = useDispatch()
  const { myData, loading, error } = useSelector(state => state.myData)

  const handleGetData = () => {
    // 可传入自定义参数，会被thunk的异步函数接收
    dispatch(fetchMyData({ page: 1, pageSize: 10 }))
  }

  return (
    <div>
      <button onClick={handleGetData}>拉取数据</button>
      {loading && <span>加载中...</span>}
      {error && <span>请求错误：{error}</span>}
      {myData.map(item => <div key={item.id}>{item.content}</div>)}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Teamol