Reactjs builder.addCase不会更改状态
我有一个重置密码片,在这里我发出一个异步请求。切片还更新请求进度状态,如下所示:Reactjs builder.addCase不会更改状态,reactjs,redux,react-redux,redux-thunk,redux-toolkit,Reactjs,Redux,React Redux,Redux Thunk,Redux Toolkit,我有一个重置密码片,在这里我发出一个异步请求。切片还更新请求进度状态,如下所示: export const initialBasicAsyncState: BasicAsyncState = { isLoading: false, isSuccess: false, errors: { status: null, message: "" }, }; interface ResetPasswordData { password: string; confi
export const initialBasicAsyncState: BasicAsyncState = {
isLoading: false,
isSuccess: false,
errors: { status: null, message: "" },
};
interface ResetPasswordData {
password: string;
confirmPassword: string;
token: string;
}
const initialResetPasswordErrors = {
passwordErrorMessage: "",
confirmPasswordErrorMessage: "",
};
export const resetPassword = createAsyncThunk<
void,
ResetPasswordData,
{ rejectValue: CustomAuthError }
>(
"resetPassword/resetPassword",
async (resetPasswordData, { rejectWithValue }) => {
const { password, confirmPassword, token } = resetPasswordData;
try {
await axios.post(resetPasswordTokenURL(token), {
password,
confirmPassword,
});
} catch (err) {
console.error(err);
const { status, statusText, data } = err.response;
if (status === 422) {
const formattedErrors = setupMultipleErrors(
err,
initialResetPasswordErrors
);
return rejectWithValue({ status, message: formattedErrors });
}
if (status === 401) {
return rejectWithValue({
status,
message: data.message,
});
}
return rejectWithValue({ status, message: statusText });
}
}
);
const resetPasswordSlice = createSlice({
name: "resetPassword",
initialState: {
...initialBasicAsyncState,
},
reducers: {},
extraReducers: (builder) =>
builder
.addCase(resetPassword.pending, (state) => {
state.isLoading = true;
})
.addCase(resetPassword.fulfilled, (state) => {
state.isLoading = false;
state.isSuccess = true;
})
.addCase(resetPassword.rejected, (state, action) => {
state.isLoading = false;
if (action.payload) state.errors = action.payload;
}),
});
export const {} = resetPasswordSlice.actions;
export default resetPasswordSlice.reducer;
export const initialBasicAsyncState:BasicAsyncState={
孤岛加载:false,
isSuccess:false,
错误:{状态:null,消息:},
};
接口重置密码数据{
密码:字符串;
confirmPassword:字符串;
令牌:字符串;
}
常量initialResetPasswordErrors={
passwordErrorMessage:“”,
confirmPasswordErrorMessage:“”,
};
export const resetPassword=createAsynchThunk<
无效的
重置密码数据,
{rejectValue:CustomAuthError}
>(
“重置密码/重置密码”,
异步(resetPasswordData,{rejectWithValue})=>{
const{password,confirmPassword,token}=resetPasswordData;
试一试{
等待axios.post(resetPasswordTokenURL(令牌){
密码,
确认密码,
});
}捕捉(错误){
控制台错误(err);
const{status,statusText,data}=err.response;
如果(状态===422){
const formattedErrors=设置多个错误(
犯错误
initialResetPasswordErrors
);
返回rejectWithValue({状态,消息:formattedErrors});
}
如果(状态===401){
返回rejectWithValue({
地位
message:data.message,
});
}
返回rejectWithValue({status,message:statusText});
}
}
);
const resetPasswordSlice=createSlice({
名称:“重置密码”,
初始状态:{
…初始化BasicAsyncState,
},
还原子:{},
外部减速器:(生成器)=>
建设者
.addCase(resetPassword.pending,(状态)=>{
state.isLoading=true;
})
.addCase(resetPassword.completed,(状态)=>{
state.isLoading=false;
state.issucess=true;
})
.addCase(resetPassword.rejected,(状态、操作)=>{
state.isLoading=false;
if(action.payload)state.errors=action.payload;
}),
});
export const{}=resetPasswordSlice.actions;
导出默认的resetPasswordSlice.reducer;
我从作为有效负载的resetPassword
功能中获得正确的错误。但是,addCases
内部的状态不会改变,即使是作为有效负载得到的错误也不会改变
以下是redux开发工具内部的情况:
谢谢你的麻烦。正如在评论中提到的,我犯了一个愚蠢的错误,没有正确地包含
resetPasswordSlice.reducer
,这非常令人惊讶。你有没有可能发布一个复制这个问题的代码沙盒?另外,只需检查:您的resetPasswordSlice.reducer
是否实际包含在存储设置中,该切片的状态是否在DevTools的“状态”选项卡中可见?。也许你可以玩这个,看看你是否能重现这种行为。