How to push to array value of reducer state in redux toolkit?

Question

I have a simple reducer function

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { TSnackBarProps } from 'plugins/notification/NotificationContext';
import { MAX_STACK } from 'plugins/notification/NotificationsStack';

interface INotificationState {
  notifications: TSnackBarProps[];
}

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

const notificationSlice = createSlice({
  name: 'notification',
  initialState,
  reducers: {
    addNewNotification(state, action: PayloadAction<TSnackBarProps>) {
      const { notifications } = state;
      const { payload: notification } = action;
      if (notifications.find((n) => n.severity === notification.severity && n.key === notification.key)) {
        return;
      }
      if (notifications.length >= MAX_STACK) {
        notifications.splice(0, notifications.length - MAX_STACK);
      }

      state.notifications.push(notification);
    },
  },
});
export default notificationSlice.reducer;

But, it throws the error as shown below:

I am just starting to write this reducer and got stuck here. Thanks for your help.

Also, TSnackBarProps is just SnackBarProps type from material-ui with severity property added.

u should provide more details , like interfaces and actions and some more . and i think your reducer looks weird! — b3hr4d
– b3hr4d, Commented Dec 10, 2020 at 7:15
How its related to redux toolkit? You assign readonly string[] instead of string[] — Dennis Vash
– Dennis Vash, Commented Dec 10, 2020 at 7:16

phry · Accepted Answer · 2020-12-10 08:25:54Z

1

immer's Draft type, which is used by RTK removes the readonly temporarily from all state types so that you can freely modify it. Unfortunately, that goes a little bit too far in this case.

But of course: you know better than TypeScript here. So you could just cast your state variable, which is Draft<INotificationState> at the moment to INotificationState to assign to it, which is a perfectly valid thing to do in a situation like this.

answered Dec 10, 2020 at 8:25

phry

44.9k7 gold badges96 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to push to array value of reducer state in redux toolkit?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related