React + Flux：将初始状态放入商店

Question

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

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

我遇到的问题是我需要将一些初始状态（作为道具传递）到模态组件的存储中。在this post 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 反模式？

Answer 1

您使用getInitialState() 更改商店的状态对我来说是错误的。您至少应该在componentWillMount 中这样做。

我会在componentWillMount 中触发一个操作，并让存储处理程序更新存储的内部状态（这种情况应该总是不断变化的）。然后，您的组件的存储更改处理程序可以使用您当前称为“初始状态”的任何数据

Answer 2

Reflux.listenTo 在您提供第三个参数时执行此操作，Reflux.connect mixin factory（在后台使用 Reflux.listenTo）会自动为您处理此问题。这是一个例子：

var Actions = Reflux.createActions({"doIt"});

var Store = Reflux.createStore({
    listenables: [Actions],
    init: function() {
        this.state = "I like to";
    },
    onDoIt: function() {
        this.state = "Do it";
        this.trigger(this.state);
    },
    getInitialState: function() {
        return this.state;
    }
});

var DoItButton = React.createClass({
    mixins: [Reflux.connect(Store, "label")],
    onClick: function() {
        Actions.doIt();
    },
    render: function() {
        return (<div onClick={this.onClick}>{this.state.label}</div>);
    }
});

Answer 3

就像其他发帖人所说，最好的办法是在componentWillMount 中触发一个动作。在 ES6 中，这通常使用 constructor 来完成。

以下是如何使用 ES6 执行此操作的示例：

（请注意，AuthorActions.initAuthors() 依赖于实现，这只是一个示例。这可以从数据库中获取初始状态。但最重要的是，此操作应将具有初始状态的有效负载分派给调度程序）

var _authors = [];
var AuthorStoreInstance;

class AuthorStore extends EventEmitter {

    constructor(props) {
        super(props);
    }

    init() {
        AuthorActions.initAuthors();
        this.emitChange();
    }

    addChangeListener(cb) {
        this.on(CHANGE_EVENT, cb);
    }

    removeChangeListener(cb) {
        this.removeListener(CHANGE_EVENT, cb);
    }

    emitChange() {
        this.emit(CHANGE_EVENT);
    }

    getAllAuthors() {
        return _authors;
    }

    addAuthor(author) {
        _authors.push(author);
        this.emitChange();
    }

    setAuthors(authors) {
        _authors = authors;
    }

};


AuthorStoreInstance = new AuthorStore();

Dispatcher.register((action) => {
    switch(action.actionType) {
        case ActionTypes.CREATE_AUTHOR:
            AuthorStoreInstance.addAuthor(action.author);
            break;
        case ActionTypes.INITIALIZE:
            AuthorStoreInstance.setAuthors(action.initialData.authors);
            break;

        default:
            //do nothing
    }
});

AuthorStoreInstance.init();

export default AuthorStoreInstance;

注意 init 函数不是构造函数的一部分。这是因为在构造 authorStore 时，AuthorActions.initAuthors 的回调尚未注册到调度程序。

应该在向调度程序注册回调之后进行初始化。

编辑：为清楚起见，initAuthors 可能看起来像这样：

initAuthors() {
    var authors = AuthorAPI.getAllAuthors();

    Dispatcher.dispatch({
        actionType: ActionTypes.INITIALIZE,
        initialData: {
            authors: authors
        }
    });
}