Redux and Flux

While Redux derives from Flux concepts, there are a few distinctions between the two architectures.

In contrast to Flux, Redux only has a single store that holds no logic by itself. The store dispatches and handles Actions directly, eliminating the need for a standalone dispatcher. In turn, the store passes the actions to state-changing functions called reducers.

Application data

While many other frameworks divide the data between different services and areas, in Redux, we keep all our data in a central repository accessible by all parts of the UI.

Changing the data

Since all of our data is sitting in a single JavaScript object, there has to be a way to modify it in a clear and consistent fashion. But allowing various places in our code to access and modify our central repository directly will make it very hard to track changes and update the UI correctly.

In Redux, sending an action initiates all changes to the store. This action is a plain JavaScript object containing all the information describing the required change. The action is dispatched to our store, which calculates the new state according to the action.

Since the store is a generic implementation, in Redux, we use reducers to calculate what our current state will look like when an action is applied.

Updating the UI

Each UI framework using Redux (React, Angular, etc.) is responsible for subscribing to the store to listen to its “store updated” events and updating the UI accordingly.

The core concept of Redux is that our UI always reflects the state of the application in the store. Sending an action will cause our store to use our reducers to calculate a new state and notify the UI layer to update the UI accordingly.

Advanced flows

Other parts of Redux make the application easier to build and manage, like the middleware. Every action gets passed through a pipeline of middleware. Unlike reducers, middleware can modify, stop, or add more actions.

Examples might include logging middleware, an authorization middleware that checks if the user has the necessary permissions to run the action.