If you’ve been using Redux, or have used it before, but don’t know much about Facebook’s Flux Pattern. Don’t worry about it, you’ll get it in no time.
Here’s the jist.
Flux can be seen as a precursor to Redux. It was created as an alternative to the Model-View-Controller (MVC) pattern due to the number of bugs that arose as applications scaled and became increasingly more complicated.
Furthermore, due to the bi-directional nature of MVC, it makes tracking the source of bugs a big pain, as well lead to instability of the overall architecture.
Flux introduced the idea of a unidirectional flow of information, that passes through 4 specific components:
- Store(s): The container for the app state and logic
- Action(s): Performs the passing of data to the Dispatcher
- View(s): Renders the data/UI and properties of state allocated to it
- Dispatcher: Orchestrates actions and updates to the store(s)
The significance of a unidirectional approach to managing data is that since the data flows through your application in one direction, you have more control over what it does, what it triggers, where it is stored, etc.
If you’re familiar with Redux, this should all sound pretty similar.
Redux operates under the same principle of maintaining a unidirectional flow of data. However, the main difference between Flux and Redux seems to be how they handle state.
Flux allows an application to have multiple stores — javascript objects that hold the application’s state — allowing each store to be responsible for a specific part of the application. As a result of having multiple stores, the functionality of a dispatcher is required to assist in directing actions to each store.
Every action will be sent to every store by the dispatcher and as a result, the logic for responding to a specific action is held within each individual store. If a particular store receives an action it is concerned with, it will trigger a direct change in state (mutable state), which would then trigger a cascade of changes to all the views connected to that store.
So far this sounds a lot like Redux’s reducers + store in action.
Within Redux, due to having a single store that manages the entire state of the application (single source of truth), there is no need for a ‘dispatcher’ (although there is mapDispatchToProps — so I get it if the terminology is a little confusing — just know they’re not considered to be the same in this context) because all the actions will be going to the same place/store. Rather, Redux uses reducers — pure functions — to handle the logic as well as provide any updates to state.
Every action fired by a view will be sent to the store, where they will be available to the root reducer, which passes the action to each sub-reducer within it. If a sub-reducer is concerned with the action type, it will trigger a state change by replacing the previous state with updated copies of itself/previous state (immutable state). This new updated copy will be reflected within the root reducer, and thus store, initiating any updates to the views that are required. The single complex store within Redux allows every view within your application to have access to all the state at once, which depending on your application, may be a game-changer.
Some things to consider between Flux and Redux:
Flux is a pattern/design for application architecture, while Redux is an actual library for creating the Ui as well as managing state. The latter being inspired by the former, both are integral parts of developing applications and equally important for developers to know. Both support client-side frameworks like React, AngularJS, Vue.js, and Polymer, with Redux allowing for a few others like Meteor, Ember, and Backbone.js. Overall, the implementation of either will be dependent on the needs of your application.
Hopefully, this quick comparison between the two helps elucidate the similarities and differences for you. If you’d like to learn more about Flux or Redux, make sure to take a look at their docs as well as watch some videos to see the code at work for larger scaled applications. And if you’re interested in learning Redux from the source, one of its creators, Dan Abramov has a series of free tutorials you should totally check out.
Alright, that's a wrap — take care everyone!