React redux: невозможно установить для неизменной записи

Question

Я пытаюсь обновить мою модель редукса от моего редуктора.Модель является расширением класса Immutable Record.Я пытаюсь обновить запись с помощью установленного метода:

import { List, Record } from 'immutable';
import { IFaqItem } from './api.models';

export interface IFaqsState {
  loading?: boolean;
  items?: List<IFaqItem>;
}
const faqsState = Record({
  loading: false,
  items: List()
});

class FaqsState extends faqsState implements IFaqsState {
  loading: boolean;
  items: List<IFaqItem>;

  with(props: IFaqsState) {
    this.set('loading', props.loading);
    return this;
  }
}

export default FaqsState;

Редуктор содержит следующее:

case ActionTypes.FAQS_GET_AJAX_RECEIVE:
  let response: IFaqsGetResponse = action.payload.response && action.payload.response.response;
  return state.with({
    loading: false,
    items: List(response)
  });

Однако при этом возникает следующая ошибка:

Error: Cannot set on an immutable record.

ОБНОВЛЕНИЕ

Когда я меняю редуктор с:

let initial = new FaqsState();

const faqsReducer: Reducer<FaqsState> = (state = initial, action: AppActions) => {

на:

const faqsReducer: Reducer<FaqsState> = (state = null, action: AppActions) => {

  state = new FaqsState();

, это похоже на работу.Почему это не работает, когда я даю начальное состояние в качестве аргумента?

Answer 1

В вашем обновлении всякий раз, когда вызывается ваш редуктор, создается новый state = new FaqsState();.

В то время как в вашей предыдущей реализации, let initial = new FaqsState(); создается один раз и выходит за рамки видимости редуктора.функция, и, следовательно, одна и та же ссылка / запись используется повторно для каждого последующего вызова редуктора.Когда этот редуктор вызывается впервые, initial пуст и может вызываться с помощью with для установки значения initial, но после этого значение initial уже установлено, и второй вызов наРедуктор попытается «перезаписать» значение initial, что приведет к исключению.

Однако я бы предложил вам подпись для краткости и правильности

const faqsReducer: Reducer<FaqsState> = (state =(new FaqsState()), action: AppActions) => {

, потому что ваш обновленныйРедуктор не может получить предыдущее значение состояния.

Answer 2

Просто сделай:

with(props: IFaqsState) {
  return this.set('loading', props.loading);
}

Answer 3

Попробуйте использовать следующий подход для обновления вашего редуктора. Определите состояние

let initialState = {
   // Create an immutable object 
   list: { loading: true, list: []}
};

Тогда в случае коммутатора,

case ActionTypes.FAQS_GET_AJAX_RECEIVE:
    let response: IFaqsGetResponse = action.payload.response && 
    action.payload.response.response;
    return {...initialState.list, loading: false, items:List(response)}

Answer 4

Ну, это неизменный .Когда вы вызывали функцию with, вы мутировали объект, нарушая, таким образом, его единственное ограничение.
Чтобы избежать этого, вы должны создать новый экземпляр с новыми значениями и вернуть его в хранилище.