Не удается получить доступ к initialState среза в Redux, поэтому мне приходится прибегать к ручному заданию свойств состояния

Question

У меня есть фрагмент под названием modal, который отвечает за отображение и скрытие модального объекта, используя действия showModal и hideModal.

Вот как это выглядит:

    export const modal = createSlice({
  slice: "modal",
  initialState: {
      visible: false,
      selectedExpenseId: null
  },
  reducers:{
    showModal: (state, { payload }) => (
      state = {
        visible: true,
        selectedExpenseId: payload
      }
    ), 
    hideModal: (state, {payload}) => (state = state.initialState) 
    //hideModal: (state, {payload}) => (state = {visible: false, selectedExpenseId: null}) 

  }
});

showModal работает как положено, но когда я звоню hideModal, ничего не происходит, так как кажется, что я не могу получить доступ к initialState таким образом. Когда я прибегаю к закомментированной строке, которая вручную назначает значения по назначению, это работает.

Я хотел бы знать, что я делаю неправильно, поскольку я, очевидно, предпочел бы правильно обращаться к initialState. Я новичок в React и Redux, так что я уверен, что, возможно, я просто упускаю что-то очевидное здесь

Приветствия.

Answer 1

Оба ваших редуктора в настоящее время не правы. Вы видите «правильное» поведение для showModal только случайно.

Похоже, вы используете Redux Starter Kit. Поскольку внутри Immer используется Immer, есть два способа обновить состояние:

1. «Мутировать» содержимое внутри значение state
2. Создатьновое неизменяемое-обновленное значение самостоятельно и верните его.

Ни один из ваших редукторов на самом деле не делает это правильно.

Назначение state = something внутри редуктора не изменяет содержимоеstate, и это не , возвращающее новое значение. Вместо этого он просто меняет то, на что указывает локальная переменная state в этой функции.

Кроме того, нет поля state.initialState.

Если работает showModal, этотолько случайно, возможно потому, что оператор присваивания также неявно возвращает результат присваивания.

То, что вы должны делать, выглядит примерно так:

const initialState = {
    visible: false,
    selectedExpenseId: null
};

export const modal = createSlice({
    slice: "modal",
    initialState,
    reducers: {
        showModal(state, {payload}) {
            return {visible: true, selectedExpenseId: payload};
        },
        hideModal(state) {
            return initialState;
        }
    }
});

Обратите внимание, что вы могли бы также написать такие редукторы, как:

showModal(state, {payload}) {
    state.visible = true;
    state.selectedExpenseId = payload;
}

(Источник: я сопровождающий Redux, и я написал Redux Starter Kit.)

Answer 2

Нигде в документации Redux не упоминается, что вы получите свойство в state с именем initialState, которое будет содержать начальное состояние.

Redux не заполняет никакое свойство в state объект сам по себе, если вы не делаете это в вашем reducers или через initialStateСуществуют различные способы достижения желаемого поведения, из которых вы упомянули 1 в самом вопросе. Если вы хотите получить к нему доступ через initialState, то вы можете следовать приведенной ниже логике:

const initialState = {
  visible: false,
  selectedExpenseId: null
};
export const modal = createSlice({
  slice: "modal",
  initialState: {...initialState},
  reducers:{
    showModal: (state, { payload }) => (
      state = {
        visible: true,
        selectedExpenseId: payload
      }
    ), 
    hideModal: (state, {payload}) => (state = {...initialState}) 
  }
});

Мы использовали спред (тройная точка {...}), чтобы избежатьмутация исходного initialState объекта.