我可以使用 redux 工具包访问带有 axios 的 createAsyncThunk 中的状态吗？答案

【问题标题】：Can I access state inside a createAsyncThunk w/axios with redux toolkit?我可以使用 redux 工具包访问带有 axios 的 createAsyncThunk 中的状态吗？
【发布时间】：2021-07-24 01:33:26
【问题描述】：

我对 redux 工具包还很陌生，所以我仍然遇到一些问题！

根据下面的代码，我正在尝试访问我的createAsyncThunk 中的状态（loginDetails.username 和 loginDetails.password）。我显然在这里做错了 - 我尝试在另一个文件中编写 createAsyncThunk 函数，尝试访问该文件中的状态，然后导入该函数，但无论哪种方式都失败了。

// Import: Packages
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

// AsyncThunk: getUserDetails
export const getUserDetails = createAsyncThunk(
  "userDetails/getUserDetails",
  async () => {
    try {
      const apiUrl = process.env.REACT_APP_URL;

      var config = {
        method: "get",
        url: `${apiUrl}/claimSet?UserName=${state.loginDetails.username}&Password=${state.loginDetails.password}`,
        headers: {
          accept: "application/json",
        },
      };

      const response = await axios(config);
      const data = await response.data;
      return data;
    } catch (error) {
      console.log(error);
    }
  }
);

// Slice: userDetailsSlice
export const userDetailsSlice = createSlice({
  name: "userDetails",
  initialState: {
    loginDetails: {
      username: "",
      password: "",
    },
    details: [],
    status: null,
  },
  reducers: {
    addUsername: (state, { payload }) => {
      state.loginDetails.username = payload;
    },
    addPassword: (state, { payload }) => {
      state.loginDetails.password = payload;
    },
  },
  extraReducers: {
    [getUserDetails.pending]: (state, action) => {
      state.status = "loading";
    },
    [getUserDetails.fulfilled]: (state, { payload }) => {
      state.details = payload;
      state.status = "success";
    },
    [getUserDetails.rejected]: (state, action) => {
      state.status = "failed";
    },
  },
});

// Actions: addUsername, addPassword
export const { addUsername, addPassword } = userDetailsSlice.actions;

// Reducer: userDetailsSlice.reducer
export default userDetailsSlice.reducer;

配置 url ${state.loginDetails.username} 等中的代码只是获取状态的许多失败尝试之一。我知道部分问题是createAsyncThunk 是在状态/幻灯片位于下方之前声明的，但我似乎仍然找不到解决方法。

任何帮助将不胜感激！

提前致谢

【问题讨论】：

标签： reactjs redux axios redux-toolkit

【解决方案1】：

异步函数使用一个“有效负载”参数，其次是一个包含getState 方法的thunkAPI 对象。

payloadCreator

thunkAPI: 一个包含所有正常参数的对象传递给 Redux thunk 函数，以及其他选项：

dispatch：Redux 存储 dispatch 方法

getState：Redux 存储getState 方法

extra：在设置时为 thunk 中间件提供的“额外参数”（如果可用）

requestId：自动生成的唯一字符串 ID 值，用于识别此请求序列

signal：一个AbortController.signal 对象，可用于查看应用程序逻辑的另一部分是否已将此请求标记为需要取消。

rejectWithValue：rejectWithValue 是一个实用函数，您可以在您的操作创建者中返回它以返回一个带有定义的有效载荷。它会传递你给它的任何值并返回它在被拒绝操作的负载中。

// AsyncThunk: getUserDetails
export const getUserDetails = createAsyncThunk(
  "userDetails/getUserDetails",
  async (arg, { getState }) => { // <-- destructure getState method
    const state = getState(); // <-- invoke and access state object
    try {
      const apiUrl = process.env.REACT_APP_URL;

      var config = {
        method: "get",
        url: `${apiUrl}/claimSet?UserName=${state.loginDetails.username}&Password=${state.loginDetails.password}`,
        headers: {
          accept: "application/json",
        },
      };

      const response = await axios(config);
      const data = await response.data;
      return data;
    } catch (error) {
      console.log(error);
    }
  }
);

【讨论】：