useInjectReducer clears the state

[aszokalski]

I have two slices in my store. Each has one reducer which I inject at the root of my react app.

notificationSlice.ts

import { AnyAction, createSlice, PayloadAction } from '@reduxjs/toolkit';

export interface notificationFormat {
  type: 'system' | 'confirmation' | 'message' | 'chat';
  title: string;
  description: string;
  avatarSrc?: string;
  lessonID?: number;
}

export interface notificationsState {
  notifications: notificationFormat[];
}

const initialState: notificationsState = {
  notifications: [],
};

export const notificationsSlice = createSlice({
  name: 'notifications',
  initialState,
  reducers: {
    addNotification: (state, action: PayloadAction<notificationFormat>) => {
      state.notifications.push(action.payload);
    },
    removeNotification: (state, action: PayloadAction<number>) => {
      delete state.notifications[action.payload];
    },
    clear: (state, action: AnyAction) => {
      state.notifications.length = 0;
    },
    setNotifications: (state, action: PayloadAction<notificationFormat[]>) => {
      state.notifications = action.payload;
    },
  },
});

export const { addNotification, removeNotification, setNotifications, clear } =
  notificationsSlice.actions;

export default notificationsSlice.reducer;

accountSlice.ts

import { AnyAction, createSlice, PayloadAction } from '@reduxjs/toolkit';

export interface accountState {
  email: string;
  password: string;
  checked: boolean;
}

const initialState: accountState = {
  email: '',
  password: '',
  checked: false,
};

export const accountSlice = createSlice({
  name: 'account',
  initialState,
  reducers: {
    setEmail: (state, action: PayloadAction<string>) => {
      state.email = action.payload;
    },
    setPassword: (state, action: PayloadAction<string>) => {
      state.password = action.payload;
    },
    setChecked: (state, action: PayloadAction<boolean>) => {
      state.checked = action.payload;
    },
    logout: (state, action: AnyAction) => {
      state.email = '';
      state.password = '';
      state.checked = false;
    },
  },
});

export const { setEmail, setPassword, setChecked, logout } =
  accountSlice.actions;

export default accountSlice.reducer;

I want my store to be persistent so I save every change to local storage and load it back when the website gets refreshed.

However, every time my website gets refreshed and the reducers get injected again, it clears half of my state. If I inject the notificationSlice reducer first -> it clears the accountSlice. And vice versa.

When I tried debugging it I found that just after the refresh the state loads just fine (from the local storage) but it breaks when the reducers are injected.

How to fix this?

[sergeushenecz]

@aszokalski I have some issue. Did you found workaround?

[aszokalski]

@sergeu90 nope. I had to resign from using 2 reducers.