Как передать значение массива состояния редуктора в наборе инструментов Redux?

У меня есть простая функция редуктора

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;

Но он выдает ошибку, как показано ниже:

Я только начинаю писать этот редуктор и застрял здесь. Спасибо за вашу помощь.

Кроме того, TSnackBarProps — это просто тип SnackBarProps из material-ui с добавленным свойством серьезности.

Вы должны предоставить больше деталей, таких как интерфейсы и действия и многое другое. и я думаю, что ваш редуктор выглядит странно!

b3hr4d 10.12.2020 08:15

Как это связано с набором инструментов Redux? Вы назначаете readonly string[] вместо string[]

Dennis Vash 10.12.2020 08:16

@ b3hr4d Добавлен полный код.

priosshrsth 10.12.2020 08:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
2 296
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Тип immerDraft, который используется RTK, временно удаляет readonly из всех типов состояний, чтобы вы могли свободно изменять его. К сожалению, в данном случае это заходит слишком далеко.

Но, конечно: здесь вы знаете лучше, чем TypeScript. Таким образом, вы можете просто привести свою переменную состояния, которая Draft<INotificationState> в данный момент INotificationState для назначения ей, что вполне допустимо в такой ситуации.

Другие вопросы по теме