我可以使用 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.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
是在状态/幻灯片位于下方之前声明的,但我似乎仍然找不到解决方法。
任何帮助将不胜感激!
提前致谢
【问题讨论】:
【参考方案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 操作
插入并放入nodeJs + express api时,带有Redux Saga的Axios不发送表单数据