How do you change Object values with Flux Stores?

Question

Since Facebook removed Flux's MapStore , I'm having a hard time figuring out the best way to mutate an object in its store.

ReduceStore is supposed to be able to handle this problem, and The Pro-React book by Cássio de Sousa Antonio has several examples of ReduceStore, but none of them highlight this functionality, and I'm a bit lost.

 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 

I tried:

 state.foo = action.value; return state; 

but doing this doesn't trigger any changes.

UPDATED:

Using Immutable worked:

 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; } } } 

However, now in the rendering methods, I have to be careful to use Map's getter functions, ex:

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

Answer 1

Your initial state is a plain object, but your reduce seems to be opperating on Immutable objects. This means when reduce is called the first time, state is a plain object with no set property, giving you the TypeError you mention. Changing your getInitialState to return an immutable map (eg wrap what you have in Map(...) ) will fix it.