React + Flux:将初始状态变为商店

Mar*_*zee 13 javascript reactjs reactjs-flux refluxjs

我们最近从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;
  }
  ...
Run Code Online (Sandbox Code Playgroud)

我不确定这样做的最佳做法是什么,或者这是否是Flux反模式?

Des*_*Lee 12

getInitialState()用来改变商店的状态对我来说是不对的.你至少应该这样做componentWillMount.

我会触发一个动作componentWillMount并让商店处理程序更新商店的内部状态(这应该总是如此).然后,组件的商店更改处理程序可以使用您当前称为"初始状态"的任何数据

  • 看起来聊天应用程序在`getInitialState`中获得初始状态,而不是建议的`componentWillMount`. (6认同)