Как вы изменяете значения объектов в магазинах 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(...)
) это исправит.