小编典典

React + Flux:使初始状态进入商店

reactjs

我们最近已从Angular切换到React + Flux,以构建一个相当复杂的业务应用程序。

由于应用程序使用了类似大型页面的模式,因此采用一种容器组件将所有状态作为属性传递到组件树的方法对于我们来说并不是一种实用的开发方法。确实有足够的状态传递给模态,使他们可以将数据加载到存储中。

我的问题是我需要将一些初始状态(作为道具传递)进入模态组件的存储中。在这篇文章中,Facebook上的好人说,当同步不是目标时,可以将道具用于初始状态。

这是我目前如何将初始状态进入商店的方式:

var ABC = React.createClass({
  ...  
  getInitialState: function() {
    return ABCStore.getInitialABCState(this.props.initialA);
  },
  ...

var ABCStore = Reflux.createStore({
  ...
  init: function() {
    _state = {
      a: null,
      b: 'B init',
      c: 'C init'
    };
  },

  getInitialABCState: function(initialA) {
    _state.a = initialA;
    return _state;
  },

  getABCState: function() {
    return _state;
  }
  ...

我不确定执行此操作的最佳做​​法是什么,或者不确定这是否是Flux反模式?


阅读 207

收藏
2020-07-22

共1个答案

小编典典

getInitialState()用来更改商店状态对我来说是错误的。您至少应该在中执行此操作componentWillMount

我将触发一个动作,componentWillMount并让商店处理程序更新商店的内部状态(在flux中应该总是这样)。然后,您组件的存储区变更处理程序可以使用您当前称为“初始状态”的任何数据

2020-07-22