Как правильно манипулировать состоянием внутри редуктора

Question

Внутри моего редуктора есть следующий корпус. Это срабатывает, когда пользователь отвечает на вопрос. Когда пользователь отвечает на вопрос, его необходимо удалить из вложенного массива.

Пример объекта вопроса (они находятся в массиве)

{
    "title": "Quick Questions",
    "questions": [
        "title": "Hello?"
        "answers" [ /*... array of answers in here */ ]
    ]
}

Мой редуктор

case ANSWER_QUESTION:
    // The 0s here would be dynamically populated
    state.questionGroups[0].questions.splice(0, 1)

    return Object.assign({}, {
        ...state,
    })

Тем не менее, здесь я непосредственно манипулирую состоянием, которое, как я знаю, является неправильным и приведет к тому, что приёмник не будет корректно обновлять состояния, чтобы заставить мои компоненты перерисовываться.

Как правильно это сделать?

РЕДАКТИРОВАТЬ: Это может или не может быть причиной того, что мой компонент не выполняет повторную визуализацию. Это может быть связано с тем, что при использовании connect() применяются только поверхностные сравнения, это правильно?

Answer 1

Сначала скопируйте состояние, затем управляйте и возвращайте.

case ANSWER_QUESTION:
  var newState = Object.assign({}, state);
  //make your manipulations here
  return newState;

Answer 2

Каждый раз, когда вы должны вернуть новый объект. Для этого вы можете легко использовать функции ES6.

case ANSWER_QUESTION:
        return {
            ...state,
            questionGroups[0]: [...state.questionGroups[0].questions.slice(0, action.payload), ...state.questionGroups[0].questions.slice(action.payload + 1)]
    }

Answer 3

Первое: вы используете Splice метод, который на самом деле является изменяемым методом. Вы должны использовать Slice вместо.

Второе: если вам нужно манипулировать состоянием, вы должны отредактировать его копию.

Как это:

const newState = state;

// here you edit your stte
newState = newState.questionGroups[0].questions.slice(0, 1)

// here you return your new state
return Object.assign({}, {
    ...newState,
})

Надеюсь, это поможет