应该使用商店在React+Flux中进行简单的UI更改吗

Question

假设我有以下组件结构：

App
   DivContainer1
       Child1
           Button1
       Child2
           Button2
   DivContainer2
       AComponentHere

当我按下按钮1时，我想用另一个组件替换DivContainer2的内容，例如，用AnotherComponent替换AComponentHere，该组件将根据单击的Child按钮呈现数据。

是否应该有一个AppStore和AppAction告诉它更改为另一个组件，或者我应该在这里传递更改状态的道具？基本上，我想知道Stores是只用于保存数据状态，还是也用于保存ui状态。

Answer 1

您肯定可以有一个UI状态存储。在这种情况下，听起来您正在寻找一种实现导航的方法。如果你不想使用像react router这样的大型路由器，我只需要创建一个简单的UIStore或NavigationStore

// store setup...
var flags = {
  currentPage: PAGES.home // page names should be in shared file somewhere...
};
// rest of store impl to manage access to these UI flags...

若要更改内容，请从onClick事件中启动一个操作（例如），该操作将更新存储属性以匹配要显示的组件。

handleClick: function(e) {
    // this should trigger store to change the currentPage
    AppActions.navigateTo(PAGES.about);
}

然后，在render()中，您只需要一个条件语句或switch语句，即可为每个给定值提供正确的输出：

  //...
  render: function() {
    return (
      <div class="DivContainer2">
        {switch (this.state.currentPage) {
          case PAGES.home:
            <HomePage />
            break;
          case PAGES.about:
            <AboutPage someAttr={true} />
            break;
          default:
            <NotFoundPage />
        }}
      </div>
    );
  }