Как использовать распространение объектов reduxjs/toolkit

Я пытаюсь внедрить @reduxjs/toolkit в свой проект, и в настоящее время я столкнулся с проблемой использования оператора распространения.

const initialState: AlertState = {
  message: '',
  open: false,
  type: 'success',
};

const alertReducer = createSlice({
  name: 'alert',
  initialState,
  reducers: {
    setAlert(state, action: PayloadAction<Partial<AlertState>>) {
      state = {
        ...state,
        ...action.payload,
      };
    },
  },
});

Когда я присваиваю состояние новому объекту, мой магазин не обновляется. Но если я изменю редуктор на код

state.message = action.payload.message || state.message;
state.open = action.payload.open || state.open;

Но это не очень удобно. Так есть ли способ использовать оператор спреда?

reactjs redux redux-toolkit

14.12.2020 14:19

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

2 199

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

В этом случае вы должны вместо этого вернуть новый объект из функции:

    setAlert(state, action: PayloadAction<Partial<AlertState>>) {
      return {
        ...state,
        ...action.payload,
      };
    },

Вы можете изучить больше примеров в документации. Также помните об этом правиле:

вам нужно убедиться, что вы либо изменяете аргумент состояния, либо возвращаете новое состояние, но не то и другое одновременно.

Мне потребовались часы, чтобы понять, что я смешиваю мутацию и создаю новое состояние с помощью оператора распространения. Судя по малому количеству просмотров этого вопроса, я боюсь, что есть еще люди, которые ищут решение 🤣

— 24.03.2022 16:24

спасибо миллион за этот ответ и объяснение. Я никогда не понимал этого, и это никогда не было ясно из стандартной документации для меня. Кудо навсегда. ;-)

— 05.09.2022 13:43

14.12.2020 14:23