【问题标题】:builder.addCase does not change the statebuilder.addCase 不改变状态
【发布时间】:2021-07-01 12:21:39
【问题描述】:

我有一个重置密码片,我在其中发出异步请求。切片还会像这样更新请求进度状态:

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 内部的样子:

【问题讨论】:

  • 嗯,这很令人惊讶。您是否有机会发布复制此问题的 CodeSandbox?另外,只是为了检查:您的 resetPasswordSlice.reducer 是否实际包含在商店设置中,并且该切片的状态是否在 DevTools 的“状态”选项卡中可见?
  • I am not able to reproduce your error。也许你可以玩这个,看看你是否能重现这种行为。

标签: reactjs redux react-redux redux-thunk redux-toolkit


【解决方案1】:

感谢您的麻烦。正如 cmets 中提到的那样,我犯了一个愚蠢的错误,没有正确包含 resetPasswordSlice.reducer。

【讨论】:

    猜你喜欢
    • 2020-10-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-07-14
    • 2019-11-15
    相关资源
    最近更新 更多