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

Posted

技术标签:

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

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

根据下面的代码,我正在尝试访问我的createAsyncThunk 中的状态(loginDetails.usernameloginDetails.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 是在状态/幻灯片位于下方之前声明的,但我似乎仍然找不到解决方法。

任何帮助将不胜感激!

提前致谢

【问题讨论】:

【参考方案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);
    
  
);

【讨论】:

以上是关于我可以使用 redux 工具包访问带有 axios 的 createAsyncThunk 中的状态吗?的主要内容,如果未能解决你的问题,请参考以下文章

带有 axios 返回多个值的 Redux Thunk 操作

Redux 工具包和 Axios

插入并放入nodeJs + express api时,带有Redux Saga的Axios不发送表单数据

Redux axios 请求取消

Axios 和 Redux 返回 undefined,然后解析

如何将 axios 添加到 react-redux-universal-hot-example 入门套件?