Search code examples
react-nativeredux-thunk

React Redux rejectWithValue() not working


I'm currently facing a problem, when I try to reject a value when my node-fetch request fail, thunkApi.rejectWithValue() isn't working. However when my request is pending or when It's fulfilled, It's working fine. Here's my slice :

export const userSlice = createSlice({
  name: "user",
  initialState: initialState as User,
  reducers: {
    ...
  },
  extraReducers: (builder) => {
    ...
    builder.addCase(changePassUser.pending, (state) => {
      GGLog("FETCHING CHANGEPASS API...");
      state.isFetching = true;
      return state;
    });
    builder.addCase(changePassUser.fulfilled, (state, { payload }) => {
      GGLog("FULFILLED CHANGEPASS:", JSON.stringify(payload));
      state.isFetching = false;
      state.isSuccess = true;
      state.isError = false;
      return state;
    });
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    builder.addCase(changePassUser.rejected, (state, { payload }: any) => {
      GGLog("REJECTED CHANGEPASS:", JSON.parse(payload));
      state.isFetching = false;
      state.isError = true;
      state.errorMessage = payload.data;
      return state;
    });
  },
});

Here's my thunk :

export const changePassUser = createAsyncThunk(
  "users/password/update",
  async ({ oldpassword, newpassword }: RegisterParameters, thunkAPI) => {
    try {
      const res = await changePassApi.changePass.return({
        oldpassword: oldpassword,
        newpassword: newpassword,
      });
      GGLog("API_CHANGEPASS_RES:", res);
      const data = await res.json();
      if (res.ok) {
        GGLog("API_DATA_RESPONSE_OK: ", data);
        const tokenData = JSON.stringify(res.headers);
        const token = JSON.parse(tokenData).map["x-auth"];
        await localStorage.store("token", token);
        return data;
      } else {
        GGLog("API_DATA_RESPONSE_NOK: ", data);
        return thunkAPI.rejectWithValue(data);
      }
    } catch (e) {
      GGLog("Error while fetching Login API => ", e);
      return thunkAPI.rejectWithValue(e);
    }
  }
);

And here's the result in the console : Console output

Any ideas ? Am I missing something ? Thanks :)


Solution

  • Okay I've found my problem, I was just focused on the thunk and didn't pay attention to the promise rejection. I was trying to parse a JSON that does'nt exist... Just remove the GGLog("REJECTED CHANGEPASS:", JSON.parse(payload));in the slice. It's working fine now !