CODEWITHSUNDEEP
javascriptreactjsflux
Industrial
Industrial

Reputation: 3401

CRUD application design using Flummox (Flux), React and react-router

As a learning exercise for Flux and React, I am building a simple website. It will have a public and a private 'CMS' part.

The pages I have planned so far are:

/                          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.

Using react-router this leaves me with this router and page components:

  <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>

What I don't understand yet is where Flux / Flummox lives exactly;

  1. What is the lifespan of Flux objects? Do I have one instance of Flux and many instances of Actions and Store or do I spawn a new instance of a Flux, Actions and Store for every "page" in my app?
  2. Where does the granularity lie in grouping the actions and stores? e.g. a CMSUsersListActions (containing only actions performed on the list page) with a CMSUsersListStore (containing a list users on the list page) or a CMSUsersActions (containing all user page actions) with a CMSUsersStore (containing a list users for the list page and a currentUser for the new/edit/destroy/show page) ?

Upvotes: 0

Views: 761

Answers (1)

Ben
Ben

Reputation: 5414

Here's a tutorial I recorded the other week about this issue. https://youtu.be/o5E894TmHJg. I suggest watching it, and then if you still have questions, ping me at @bengrunfeld. Also, I'm coming out with a tutorial on creating a TODOS app on React/Flux in the next short while.

Upvotes: 1

Related Questions