Error encountered with the root reducer due to data type mismatch

Question

Error encountered with the root reducer due to data type mismatch

Within my Redux store setup, I have a persistedReducer initialized to include the redux-persist config and the "rootReducer":

client/src/redux/store.ts:

import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/es/stateReconciler/autoMergeLevel2';
import rootReducer from './rootReducer'

const persistConfig = {
  key: 'root',
  storage,
  stateReconciler: autoMergeLevel2,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export const store = configureStore({
  reducer: persistedReducer
});

export const persistor = persistStore(store);
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

The structure of the rootReducer that is declared and exported can be found in:

client/src/redux/rootReducer.ts:

import { combineReducers } from "@reduxjs/toolkit";
import { IUserState } from "../interfaces/user";
import userSlice from "./features/userSlice";

export interface RootState {
  user: IUserState;
}

const rootReducer = combineReducers({
  user: userSlice.reducer,
});

export default rootReducer;

The userSlice reducer imported into the rootReducer is constructed as follows:

client/src/redux/features/userSlice.ts

:

import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
import { IUserState } from "../../interfaces/user";
import { useSelector } from "react-redux";
import userApi from "../../apis/user";
import { RootState } from "../store";

// More code here...

export default userSlice;

The data structure for the user's state is defined in client/src/interfaces/user.ts, like this:

export type IUserState = {
  _id: string
  ipAddress: string
  createdAt: string
  alignment: string
  loading: boolean
  error: string
}

A specific issue arises in the client output concerning types mismatch within the Reducer component, along with a separate error related to the Typescript compiler. These errors seem to stem from the way the RootState interface is defined.

typescript redux redux-toolkit

Answer 1

Answer №1

It seems like the main issue lies within your updateUser Thunk, where there are a couple of issues that need addressing.

There is no requirement to parameterize createAsyncThunk as it should automatically deduce the correct types based on the store and payload creator argument.
updateUser is not a React component or custom React hook, so it cannot utilize the useSelector hook. Use thunkApi.getState to access the current state value instead.
The rejectWithValue function should be returned, not thrown, from the Thunk.

export const updateUser = createAsyncThunk<
  IUserState,
  any,
  {
    state: RootState,
    rejectValue: {
      error: string;
    }
  }
>("user/updateUser", (data: any, thunkApi) => {
  try {
    const user = thunkApi.getState().user;
    return userApi.updateUser(user, data);
  } catch (error) {
    return thunkApi.rejectWithValue({ error: "user not updated" });
  }
});

or

export const updateUser = createAsyncThunk(
  "user/updateUser",
  (data: any, thunkApi) => {
    try {
      const user = (thunkApi.getState() as RootState).user;
      return userApi.updateUser(user, data);
    } catch (error) {
      return thunkApi.rejectWithValue({ error: "user not updated" });
    }
  }
);

In addition, there are also issues in the userSlice related to state updates. It is recommended to either mutate the state directly or return an entirely new state reference value. Avoid reassigning the state using

state = Object.assign(state, payload)

, as it can lead to potential problems. Here are some suggestions:

const userSlice = createSlice({
  name: "userData",
  initialState,
  reducers: {
    getUser: (state, action: PayloadAction<IUserState>) => {
      // Mutate state
      Object.assign(state, action.payload);

      // Or return new state value
      // return action.payload;
    },
    updateUser: (state, action: PayloadAction<IUserState>) => {
      // Mutate state
      Object.assign(state, action.payload);

      // Or return new state value
      // return action.payload;
    },
  },
  extraReducers: (builder) => {
    builder.addCase(getUser.fulfilled, (state, action) => {
      Object.assign(state, action.payload);
      state.loading = false;
      state.error = "";
    });
    builder.addCase(getUser.pending, (state) => {
      state.loading = true;
      state.error = "";
    });
    builder.addCase(getUser.rejected, (state, action) => {
      state.loading = false;
      state.error = action.payload || "user not initialized";
    });
  },
});

Answer 2

It seems like the main issue lies within your updateUser Thunk, where there are a couple of issues that need addressing.

There is no requirement to parameterize createAsyncThunk as it should automatically deduce the correct types based on the store and payload creator argument.
updateUser is not a React component or custom React hook, so it cannot utilize the useSelector hook. Use thunkApi.getState to access the current state value instead.
The rejectWithValue function should be returned, not thrown, from the Thunk.

export const updateUser = createAsyncThunk<
  IUserState,
  any,
  {
    state: RootState,
    rejectValue: {
      error: string;
    }
  }
>("user/updateUser", (data: any, thunkApi) => {
  try {
    const user = thunkApi.getState().user;
    return userApi.updateUser(user, data);
  } catch (error) {
    return thunkApi.rejectWithValue({ error: "user not updated" });
  }
});

or

export const updateUser = createAsyncThunk(
  "user/updateUser",
  (data: any, thunkApi) => {
    try {
      const user = (thunkApi.getState() as RootState).user;
      return userApi.updateUser(user, data);
    } catch (error) {
      return thunkApi.rejectWithValue({ error: "user not updated" });
    }
  }
);

In addition, there are also issues in the userSlice related to state updates. It is recommended to either mutate the state directly or return an entirely new state reference value. Avoid reassigning the state using

state = Object.assign(state, payload)

, as it can lead to potential problems. Here are some suggestions:

const userSlice = createSlice({
  name: "userData",
  initialState,
  reducers: {
    getUser: (state, action: PayloadAction<IUserState>) => {
      // Mutate state
      Object.assign(state, action.payload);

      // Or return new state value
      // return action.payload;
    },
    updateUser: (state, action: PayloadAction<IUserState>) => {
      // Mutate state
      Object.assign(state, action.payload);

      // Or return new state value
      // return action.payload;
    },
  },
  extraReducers: (builder) => {
    builder.addCase(getUser.fulfilled, (state, action) => {
      Object.assign(state, action.payload);
      state.loading = false;
      state.error = "";
    });
    builder.addCase(getUser.pending, (state) => {
      state.loading = true;
      state.error = "";
    });
    builder.addCase(getUser.rejected, (state, action) => {
      state.loading = false;
      state.error = action.payload || "user not initialized";
    });
  },
});

Error encountered with the root reducer due to data type mismatch

Answer №1

Similar questions

Obtaining gender information by utilizing checkboxes in Angular 7

Tips for resolving SyntaxError: Unable to utilize import when integrating Magic with NextJS in a Typescript configuration

When converting a PDF to a PNG, the precious data often disappears in the process

Leveraging Renderer in Angular 4

To avoid TS2556 error in TypeScript, make sure that a spread argument is either in a tuple type or is passed to a rest parameter, especially when using

Ways to identify modifications from a BehaviorSubject and automatically trigger a response according to the updated value

The assigned type does not match the type 'IntrinsicAttributes & { children?: ReactNode; }'. This property is not assignable

Tips for successfully importing $lib in SvelteKit without encountering any TypeScript errors

Ways to implement the flow of change occurrences in the mat-select component

Having trouble with NextJS TypeScript and the randomUUID?() function? If you're seeing the error TS2386 that says "Overload signatures must all be

merging pictures using angular 4

There is no index signature that accepts a parameter of type 'string' in the type '{ [key: string]: AbstractControl; }'

What is the best method for compressing and decompressing JSON data using PHP?

Definition of TypeScript for caching middleware in Express

React Typescript: Unable to set component as element

If "return object[value1][value2] || default" does not work, it means that value1 is not a recognized property

What methods can I use to locate the circular dependency within my program?

Encountering a parsing issue: an unexpected token was found, expecting "," instead

The Typescript Select is displaying an incorrect value

Adding a total property at the row level in JavaScript