Why Flux?

General idea

Smart and dump components

Let’s fluxify our app

Let’s add new dependencies to our package.json by running: npm install –save flux events.

Dispatcher

We would need src/AppDispatcher.js:

Action types

It’s good to have action types defined in one file:

Action creators

Now we will define SubmissionActionsCreator

Which we will use in our smart SubmissionPage component instead of just directly accessing API:

And the last thing, we need to add store, where our state will live:

And we can update our smart SubmissionPage component to use it, so whole class would look like this:

In componentDidMount we use public getter to retrieve submissions from the store and assign them to local state.

In componentWillMount we subscribe for store change using addChangeListener. It’s important to unsubscribe to this change in componentWillUnmount.

Thanks to the subscription, in onChange method we can update local state to the current store state.