React + Flux：将初始状态变为商店 [英] React + Flux: Getting initial state into a store

问题描述

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

We have recently switched over to React + Flux from Angular to build a rather complex business application.

采取让一个容器组件通过所有状态的方法组件树下的属性不是为我们开发应用程序的实用方法，因为应用程序使用大型页面模式。足够的状态确实传递给他们将数据加载到他们的商店的模态。

Taking the approach of having one container component that passes all state as properties down the component tree isn't a practical way to develop the app for us as the app makes use of large page-like modals. Enough state does get passed down to the modals for them to load their data into their stores.

我遇到的问题是我需要得到一些初始状态（传递为props）进入模态组件的商店。在这篇文章中，好人们在Facebook上说，当同步不是目标时，可以使用道具作为初始状态。

The problem I have is I need to get some initial state (passed down as props) into the modal component's store. In this post the good guys over at Facebook say it's ok to use props for initial state when synchronization is not the goal.

这就是我当前进入商店的初始状态：

This is how I get the initial state into my store currently:

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反模式？

I am unsure what the best practice is to do this, or whether this is a Flux anti-pattern?

推荐答案

我觉得你使用的是 getInitialState（）来改变商店的状态。至少应该在 componentWillMount

It feels wrong to me that you are using getInitialState() to change the state of your store. You should at least be doing that in componentWillMount.

我会在 componentWillMount 中触发一个动作，并让商店处理程序更新商店的内部状态（这应该始终是在流动的情况下）。然后，组件的商店更改处理程序可以使用您当前称为初始状态的任何数据

I would trigger an action in componentWillMount and have the store handler update the internal state of the store (this should always be the case in flux). Then your component's change handler for the store can consume whatever data that you are currently calling your "initial state"

这篇关于React + Flux：将初始状态变为商店的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！