CODEWITHSUNDEEP
reactjsreactjs-flux
jhamm
jhamm

Reputation: 25032

How do I make multiple Flux apps talk?

I have been creating a React calendar. At first I just wanted to declare the calendar in the html with the appointments, like this:

<Calendar appts={appts} />

But then I realized that my calendar was going to have to be a full app, talking to the REST endpoints and have it's own store and actions.

The calendar was not the end goal, and now I need it to be part of a bigger 'Flux' app. How is everyone architecting their apps, so that the pieces can be reused, say the calendar, in other apps? How do the different Flux apps talk to each other? Are there any examples or blog posts where this is talked about?

Upvotes: 3

Views: 140

Answers (1)

Michael Lindemuth
Michael Lindemuth

Reputation: 141

Flux is an publisher-subscriber architecture recommendation from Facebook. RefluxJS is an easy to use implementation of this architecture. It adds actions and stores to ReactJS.

Actions are triggers for change. Whenever the user interacts with the page you call an action. Actions have almost completely replaced setState inside a React component for me. When a user creates an event such as a form field change, I fire an action with the event data as a function parameter. In this architecture, actions allow React components (classes) to broadcast publish changes.

Stores subscribe (listen) to actions. The simplest store simply passes on parameters that have changed with a this.trigger call. Other stores may listen to other stores, validate data, stuff parameters into data, set data into an object, or push data onto an array than broadcast the new dataset with a this.trigger call.

React components (classes) and stores can subscribe (listen) to stores. When these stores update, you can

  • Update state and all dependent props
  • Do something with the updated store dataset

Reflux comes with a very useful connect mixin which allows you to link the state of a class to a store. Be careful though, be sure to implement getInitialState in the store if you do this. Otherwise, your class will start with a null state. Another useful mixin is the ListenerMixin if you just want the component to do something when a store changes.

For more information, be sure to checkout the RefluxJS README.

Upvotes: 1

Related Questions