Should stores be used to do simple UI changes in React + Flux?

Question

Say I have the following component structure:

App
   DivContainer1
       Child1
           Button1
       Child2
           Button2
   DivContainer2
       AComponentHere

When I press Button1, I want to replace the contents of DivContainer2 with another component, e.g. replace AComponentHere with AnotherComponent that will render data based on which Child's button was clicked.

Should there be an AppStore and AppAction that tells it to change to another component, or should I pass down props that change the state here? Basically, I would like to know if Stores are used for only holding data state, or also holding ui state.

Thanks. Do you by any chance know of any open source examples of a UI store that I can look at? — timetofly, Apr 09 '15 at 15:46
It's what ever you'd like. It's just a different type of data. — WiredPrairie, Apr 09 '15 at 17:29
It sounds like that UI state should be persisted in the URL, to be honest. When the URL updates, you can re-render the page with that state, and then have some kind of Store that holds the URL/App state and sends that down to the components... The component hierarchy you've described here is essentially the same as a nav bar and content area. — Cory Danielson, Apr 09 '15 at 18:14

score 0 · Answer 1 · answered Apr 09 '15 at 18:09

You can definitely have a store for UI state. In this case, it sounds like you are looking for a way to implement navigation. If you don't want to use something large like react-router, I would just create a simple UIStore or NavigationStore with an identifier indicating which component is currently shown:

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

To change the contents, fire off an action from the onClick event (for example) that updates the store property to match the component you want to show.

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

Then, in render(), you just have a conditional or switch statement that renders the correct output for each given value:

  //...
  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>
    );
  }

Should stores be used to do simple UI changes in React + Flux?

1 Answers1