使用Flummox (Flux)、React和react路由器的CRUD应用程序设计

Question

作为对Flux和React的学习练习，我正在构建一个简单的网站。它将有一个公共和私人的'CMS‘部分。

到目前为止，我计划的页数如下：

/                          Filler page
/about                     Filler page
/contact                   Filler page
/cms/login                 Log in to the CMS.
/cms/logout                Log out of the CMS.
/cms                       Select what to manage
/cms/users/                List users
           ?q=:query       Filter by query (on the server).
           ?limit=:limit   Limit the amount of results (on the server).
           ?offset=:offset Set the offset to begin listing results at (on the server).
/cms/users/new             Add a user.
/cms/users/:id             Show a user.
/cms/users/:id/edit        Edit a user.
/cms/users/:id/destroy     Destroy a user.

使用react-router，我就有了这个路由器和页面组件：

  <Route name="application" path="/" handler={Application}>
    <Route name="public" path="/" handler={Public}>
      <Route name="about" path="about" handler={About}/>
      <Route name="contact" path="contact" handler={Contact}/>
      <DefaultRoute handler={Home}/>
    </Route>
    <Route name="cms" path="/cms" handler={CMS}>
      <Route name="login" path="/cms/login" handler={Login}/>
      <Route name="logout" path="/cms/logout" handler={Logout}/>
      <Route name="users" path="/cms/users" handler={Users}>
        <Route name="usersNew" path="/cms/users/new" handler={UsersNew}/>
        <Route name="usersShow" path="/cms/users/:id" handler={UsersShow}/>
        <Route name="usersEdit" path="/cms/users/:id/edit" handler={UsersEdit}/>
        <Route name="usersDestroy" path="/cms/users/:id/destroy" handler={UsersDestroy}/>
        <DefaultRoute handler={UsersList}/>
      </Route>
      <DefaultRoute handler={Dashboard}/>
    </Route>
  </Route>

我还不明白的是，Flux / Flummox究竟住在哪里；

1. 通量对象的寿命是多少？我是否有一个Flux实例以及许多Actions和Store实例，还是为我的应用程序中的每个“页面”生成了一个新的Flux、Actions和Store实例？
2. 在对操作和存储进行分组时，粒度在哪里？例如，CMSUsersListActions (仅包含在列表页上执行的操作)和CMSUsersListStore (包含列表页上的列表users )或CMSUsersActions (包含所有用户页面操作)和CMSUsersStore (包含列表页的列表users和新的/编辑/销毁/显示页面的currentUser )？

Answer 1

这是我前几周录制的一个关于这个问题的教程。https://youtu.be/o5E894TmHJg。我建议你看一看，然后如果你还有问题，在@bengrunfeld上给我打电话。另外，在接下来的一段时间里，我将推出一个关于在React/Flux上创建TODOS应用程序的教程。