Как вы изменяете значения объектов в магазинах Flux?

С тех пор, как Facebook удалил MapStore от Flux, мне трудно найти лучший способ изменить объект в его магазине.

Предполагается, что ReduceStore сможет справиться с этой проблемой, и в книге Pro-React Касси де Соуза Антонио есть несколько примеров ReduceStore, но ни один из них не освещает эту функциональность, и я немного растерялся.

class MyObjectStore extends Flux.ReduceStore {

  getInitialState(){
    return {
      foo: '',
      bar: '',
      baz:''
    };
  }

  reduce(state, action){
    switch (action.type) {
      case constants.CHANGE_FOO:
        return state.set('foo', action.value)
      case constants.CHANGE_BAR:
        return state.set('bar', action.value)
      case constants.CHANGE_BAZ:
        return state.set('baz', action.value)
      default:
        return state;
    }
  }
}

export default new MyObjectStore(AppDispatcher);

// => TypeError: state.set is not a function

Я старался:

state.foo = action.value;
 return state;

но это не вызывает никаких изменений.

ОБНОВЛЕНО:

Использование Immutable сработало:

import Immutable, {Map} from 'immutable';

class MyStore extends ReduceStore {

  getInitialState(){
    return Map({
      foo: '',
      bar: '',
      baz: ''
    });
  }

  reduce(state, action){
    switch (action.type) {
      case constants.CHANGE_FOO:
        return state.set('foo', action.value)
      case constants.CHANGE_BAR:
        return state.set('bar', action.value)
      case constants.CHANGE_BAZ:
        return state.set('baz', action.value)
      default:
        return state;
    }
  }
}

Тем не менее, теперь в методах рендеринга, я должен быть осторожен, чтобы использовать функции получения карты, например:

const bar = this.props.foo.get('bar');

1 ответ

Решение

Ваше начальное состояние - простой объект, но ваш reduce кажется, оперирует на неизменяемых объектах. Это значит когда reduce называется в первый раз, state это простой объект без set свойство, давая вам TypeError, которую вы упоминаете. Смена вашего getInitialState вернуть неизменную карту (например, обернуть то, что у вас есть в Map(...)) это исправит.

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