builder.addCase不改变状态
builder.addCase does not change the state
我有一个重置密码片,我在其中发出异步请求。该切片还像这样更新请求进度状态:
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;
我从 resetPassword
函数中得到正确的错误作为有效载荷。然而,addCases
内部的状态并没有改变,即使是我作为有效载荷得到的错误也是如此。
这是 redux DevTools 内部的样子:
谢谢你的困扰。正如评论中提到的那样,我犯了一个愚蠢的错误,没有正确包含 resetPasswordSlice.reducer
.
我有一个重置密码片,我在其中发出异步请求。该切片还像这样更新请求进度状态:
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;
我从 resetPassword
函数中得到正确的错误作为有效载荷。然而,addCases
内部的状态并没有改变,即使是我作为有效载荷得到的错误也是如此。
这是 redux DevTools 内部的样子:
谢谢你的困扰。正如评论中提到的那样,我犯了一个愚蠢的错误,没有正确包含 resetPasswordSlice.reducer
.