javascript – 将Flux存储中的Immutable.js映射与内部React组件状态合并

我一直在慢慢转换我的React Flux应用程序以使用Immutable.js数据结构.我使用Flux的原始的vanilla FB实现.

我遇到的一个问题是将组件状态与从Flux存储器接收的状态混合.

我将所有重要的业务逻辑状态保留在商店中.但我的规则是将UI相关状态保持在组件中.例如,如果打开一个下拉菜单,商店就不需要关心了,对吧？

当在组件中执行操作时,会出现问题,该组件会更改同一组件的存储中的状态.假设我们有一个打开下拉菜单的组件.从该下拉菜单中选择一个项目.该操作传播到ItemStore,商店发出更改,组件从商店获取新状态.

_onChange() {
  this.setState(this._getState());
}
_getState() {
  if(this.state === undefined) {
    return {
      data: Immutable.Map({
        selectedItem: ItemStore.getSelectedItem(),
        items: ItemStore.getItems(),
        menuIsOpen: false
      })
    };
  }
  return {
    data: this.state.data.merge(Immutable.Map({
      selectedItem: ItemStore.getSelectedItem(),
      items: ItemStore.getItems(),
      menuIsOpen: this.state.data.get("menuIsOpen")
    }))
  };
}

同时,在组件中,单击下拉菜单项会发出一个老式的onClick事件.我有一个_handleClick函数,它使用setState来关闭下拉菜单(本地状态).

_handleClick(event) {
  event.preventDefault();
  this.setState({
    data: this.state.data.set("menuIsOpen", !this.state.data.get("menuIsOpen"))
  });
}

问题是_handleClick最终在_getState之后很快被调用,因为它没有this.state.data的更新副本.因此,在组件的render方法中,this.state.data.get(“selectedItem”)仍然显示以前选择的项目.

当我使用POJO执行此操作时,React的setState似乎正确地批处理所有内容,因此它从来不是问题.但是我不想拥有不属于Immutable.Map的状态,因为我想利用“纯”渲染.然而,我不想将UI状态引入我的商店,因为我觉得这样可能会很快变得混乱.

有没有办法解决这个问题？或者在单个组件中合并本地Immutable.Map状态和Immutable.Map存储状态只是一种不好的做法？

相关：如果(this.state === undefined)逻辑在我的_getState方法中设置初始本地menuIsOpen状态,我不是样板的粉丝.这可能表明我正在尝试做一些不正确的事情.

解决方法:

您可以将回调传递给setState以将原子更新排入队列.

_onChange() {
  this.setState(state => this._getState(state));
}
_getState(state) {
  if(state === undefined) {
    return {
      data: Immutable.Map({
        selectedItem: ItemStore.getSelectedItem(),
        items: ItemStore.getItems(),
        menuIsOpen: false
      })
    };
  }
  return {
    data: state.data.merge(Immutable.Map({
      selectedItem: ItemStore.getSelectedItem(),
      items: ItemStore.getItems(),
      menuIsOpen: state.data.get("menuIsOpen")
    }))
  };
}

关于您的相关观点,您可能需要查看getInitialState.

标签：reactjs-flux,javascript,reactjs,flux,immutable-js
来源： https://codeday.me/bug/20190829/1763761.html