如何在Redux Toolkit的Action中添加fetch方法？

嘿，我来帮你搞定在Redux Action里添加fetch请求的事儿！Redux本身只支持同步Action，要处理异步操作（比如网络请求），咱们得借助中间件——最常用也最易上手的就是redux-thunk。下面一步步给你拆解实现过程：

1. 先安装并配置Redux Thunk中间件 #

首先得把thunk装到项目里：

npm install redux-thunk
# 用yarn的话就执行：
yarn add redux-thunk

然后在创建Store的时候，把thunk加入中间件列表，让Redux能识别异步Action：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

// 创建带thunk中间件的Store
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

export default store;

2. 编写包含Fetch的异步Action #

有了thunk，咱们就能让Action Creator返回一个函数（而不是普通的action对象），这个函数里可以执行fetch请求，然后在请求完成后分发同步Action来更新状态。

第一步：定义Action类型（方便管理和维护） #

// actionTypes.js
export const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
export const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';

第二步：编写异步Action Creator #

这里以获取示例数据为例，你可以替换成自己的接口：

// actions.js
import { FETCH_DATA_REQUEST, FETCH_DATA_SUCCESS, FETCH_DATA_FAILURE } from './actionTypes';

// 同步Action：请求开始（用来显示loading状态）
const fetchDataRequest = () => ({
  type: FETCH_DATA_REQUEST
});

// 同步Action：请求成功（携带返回的数据）
const fetchDataSuccess = (data) => ({
  type: FETCH_DATA_SUCCESS,
  payload: data
});

// 同步Action：请求失败（携带错误信息）
const fetchDataFailure = (error) => ({
  type: FETCH_DATA_FAILURE,
  payload: error
});

// 核心：异步Action Creator，返回一个函数
export const fetchData = () => {
  return (dispatch) => {
    // 先分发"请求开始"的Action，让UI显示加载状态
    dispatch(fetchDataRequest());
    
    // 执行fetch请求
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        // 检查请求是否成功
        if (!response.ok) throw new Error('请求失败');
        return response.json();
      })
      .then(data => {
        // 请求成功，分发"成功"Action
        dispatch(fetchDataSuccess(data));
      })
      .catch(error => {
        // 请求失败，分发"失败"Action
        dispatch(fetchDataFailure(error.message));
      });
  };
};

3. 在Reducer中处理这些Action #

接下来要在Reducer里响应这三个Action，更新对应的状态：

// reducers/dataReducer.js
import { FETCH_DATA_REQUEST, FETCH_DATA_SUCCESS, FETCH_DATA_FAILURE } from '../actionTypes';

// 初始状态
const initialState = {
  loading: false,
  data: [],
  error: ''
};

const dataReducer = (state = initialState, action) => {
  switch(action.type) {
    case FETCH_DATA_REQUEST:
      return {
        ...state,
        loading: true
      };
    case FETCH_DATA_SUCCESS:
      return {
        loading: false,
        data: action.payload,
        error: ''
      };
    case FETCH_DATA_FAILURE:
      return {
        loading: false,
        data: [],
        error: action.payload
      };
    default:
      return state;
  }
};

export default dataReducer;

别忘了把这个Reducer合并到根Reducer里：

// reducers/index.js
import { combineReducers } from 'redux';
import dataReducer from './dataReducer';

const rootReducer = combineReducers({
  data: dataReducer
});

export default rootReducer;

4. 在React组件中调用这个异步Action #

最后，在组件里用useDispatch（或者类组件的connect）来触发这个异步Action：

// components/DataList.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from '../actions';

const DataList = () => {
  const dispatch = useDispatch();
  const { loading, data, error } = useSelector(state => state.data);

  // 组件挂载时触发fetch请求
  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  return (
    <div>
      <h2>数据列表</h2>
      {loading && <p>加载中...</p>}
      {error && <p className="error">出错了：{error}</p>}
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataList;

额外小贴士 #

• 现在官方更推荐用Redux Toolkit来开发，它内置了thunk，还有createAsyncThunk工具能大幅简化异步Action的编写，不用手动写请求开始/成功/失败的Action，感兴趣的话可以试试~
• 除了thunk，也可以用redux-saga、redux-observable这类中间件处理复杂异步逻辑，但thunk是最适合入门的选择。

内容的提问来源于stack exchange，提问作者Hasan AL Mubashwir