使用 react redux 工具包发布请求答案

【问题标题】：Post request with react redux toolkit使用 react redux 工具包发布请求
【发布时间】：2021-10-09 01:39:19
【问题描述】：

我最近从 redux 切换到了 redux 工具包。我了解基本的状态管理，但我不知道如何使用状态数据作为有效负载向我的后端发出 (axios) 发布请求。

【问题讨论】：

您可以在 Redux 官方教程中阅读完整的示例说明：redux.js.org/tutorials/essentials/part-5-async-logic。花时间阅读，至少第 3 部分描述了示例应用程序的结构，包括一个名为 client.js 的文件，其中包含使用 Ajax（如 Axios）发送 GET 或 POST 请求的逻辑。在示例中，它使用了 Fetch API，您可以使用 Axios 替换它。
实际上有一种新的优雅的数据获取和缓存方式，即使用教程第 7 部分和第 8 部分中介绍的 Redux Toolkit (RTK) Query，但它在内部使用 Fetch API。我还在研究如何将 Axios 与 RTK Query 结合使用。

【解决方案1】：

你可能有这样的切片：

import {createSlice, } from '@reduxjs/toolkit';

export const initialState = {
  todos: [],
  loading: false,
  errorMessage: null,
};

const slice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    loadTodos(state) {
      state.loading = true;
      state.errorMessage = null;
    },
    loadTodosError(state, action) {
      state.loading = false;
      state.errorMessage = action.payload.message;
    },
    loadTodosSuccess(state, action) {
      state.loading = false;
      state.errorMessage = null;
      state.todos = action.payload.data
    },
  },
});

export const {actions, reducer} = slice;

鉴于 redux 工具包带有一个名为“createAsyncThunk”的“特殊”函数，通常用于异步操作，您可以这样调用它：

import axios from 'axios';
import {createAsyncThunk} from '@reduxjs/toolkit';

export const loadTodos = createAsyncThunk(
  'loadTodos',
  async (_, thunkAPI) => {
    const response = await axios.get('http://todos.com/api', 'delete');
    thunkAPI.dispatch(actions.loadTodosSuccess(response.data));
    return response;
  });

那么你所要做的就是导入动作并像这样调度它们

import {useDispatch, useSelector} from 'react-redux';
import {loadTodos} from './slice';

const TodoList = () => {
  const dispatch = useDispatch;

  useEffect(() => {
    dispatch(loadTodos());
  }, [dispatch]);

  const {isLoading, errorMessage} = useSelector(state => state.todos);

  return (
    <div>
      {isLoading && <Spinner />}
      {errorMessage && <span>Failed to load todos</span>}
      {todos.map(todo => (
        <div>{todo}</div>
      ))}
    </div>
  );
};

【讨论】：