2017-01-26 6 views
1

Facebook removed Flux's MapStore以来、私はその店のオブジェクトを突然変異させる最良の方法を考え出すのに苦労しています。Fluxストアでオブジェクト値をどのように変更しますか?

ReduceStoreはこの問題を処理できると思われています。Cássiode Sousa Antonioの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;

が、これはすべての変更をトリガーしないことを。

更新:不変を使用して

が働いた:

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');

答えて

0

あなたの初期状態は、プレーンオブジェクトですが、あなたのreduceは不変オブジェクトにopperatingているようです。これは、reduceが初めて呼び出されたときに、stateが、setプロパティのないプレーンオブジェクトであることを意味し、あなたが言及したTypeErrorを与えます。 getInitialStateを変更して、不変のマップを返すようにします(例えば、あなたが持っているものをラップするとMap(...))。

関連する問題