gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 11:38:12 26 4
gpt4 key购买 nike

我对 redux 工具包还很陌生,所以我仍然有一些问题!
根据下面的代码,我正在尝试访问我的 loginDetails.username 中的状态( loginDetails.passwordcreateAsyncThunk ) .我显然在这里做错了 - 我试过写 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在状态/幻灯片低于之前声明,但我似乎仍然无法找到解决方法。
任何帮助将非常感激!
提前致谢 <3

最佳答案

异步函数消耗一个“有效载荷”参数,其次是 thunkAPI包含 getState 的对象方法。
payloadCreator

thunkAPI: an object containing all of the parameters that are normallypassed to a Redux thunk function, as well as additional options:

  • dispatch: the Redux store dispatch method
  • getState: the Redux store getState method
  • extra: the "extra argument" given to the thunk middleware on setup, if available
  • requestId: a unique string ID value that was automatically generated to identify this request sequence
  • signal: an AbortController.signal object that may be used to see if another part of the app logic has marked this request as needingcancelation.
  • rejectWithValue: rejectWithValue is a utility function that you can return in your action creator to return a rejected response with adefined payload. It will pass whatever value you give it and return itin the payload of the rejected action.
// 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);
}
}
);

关于reactjs - 我可以使用 redux 工具包访问带有 axios 的 createAsyncThunk 中的状态吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67338431/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com