Search code examples
reactjsfluxreactjs-flux

Is it appropriate to send events (that don't deal with data) between components using Flux?


I have a situation where my Header component has a button which opens a dialog for a user to login. On one of my pages, I have a button that requests the user to login. I want to open the same dialog that the Header has a handle on. I understand how I can use Flux to trigger an action on my page and have the Header listen for that action via some store.

My question is since this action by the user has nothing to do with any data, is this appropriate for Flux, which is a data-flow pattern?


Solution

  • This seems like a perfectly valid reason to use a flux action:

    • have your store save some loginModalActive: false variable somewhere
    • your buttons (anywhere) can trigger a showLoginModal action to dispatcher
    • your store updates to loginModalActive: true
    • and emits change
    • your (root) component responds to store update and shows modal

    Some may argue that the loginModalActive is not really app state, but instead is component state, and therefore should not be in a store.

    My personal experience with larger flux apps is that sticking to the one-way data flow in flux is better than the purist app-state-data-only-in-stores interpretation.
    Because the alternative would be to pass down callback functions to child components, which is an antipattern, and tends to make code much harder to manage and debug.