Question

自Facebook removed Flux's MapStore以来，我很难找到改变商店中对象的最佳方法。

ReduceStore应该能够解决这个问题，CássiodeSousa 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;

但这样做不会触发任何更改。

更新：

使用Immutable working：

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

但是，现在在渲染方法中，我必须小心使用Map的getter函数，例如：

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

Answer 1

您的初始状态是一个普通对象，但您的reduce似乎在对不可变对象进行操作。这意味着第一次调用reduce时，state是一个没有set属性的普通对象，为您提供所提到的TypeError。更改getInitialState以返回不可变的地图（例如，包裹Map(...)中的内容）将修复它。

如何使用Flux Stores更改对象值？

1 个答案: