What is Redux?

Before we dive into redux and sagas, it might be nice to get some background. To quote the readme available over at https://redux.js.org/:

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

Let’s try to dig a bit deeper.

Redux is, as stated, a state container for software. It provides a simple interface for dispatching actions to reducers (we’ll get there in a bit) which leads to transitions between states that other components (or Sagas) may react to.

The most obvious use case for Redux is to use it together with a frontend framework like React or Angular, which already have established and mature packages for easy integration.

With that said however, Redux should be considered an architectural pattern rather than a product/library. See Redux.NET, godux and pydux for implementations in other languages than javascript.

Before we may fully understand the redux model we could benefit from a brief walkthrough of it’s internals.

Your immediate reaction might very well be “well, this does not look that complicated”. Fact of the matter is that it really isn’t. The by far hardest thing about redux is getting started.

The store is really not that different from the local state we already store in some way in each component or component controller (depending on the framework used). It’s a centralized, preferably immutable, object graph that represents the application.

The components in turn react to the state described by the store. This might take the form of views being rendered, items being visualized in a list, call for actions being available and so forth.

Interactions with these components may in turn dispatch actions back to the “dispatcher” which, in contrast to flux, is something we won’t have to think about as it is provided by the library itself.

The action will then flow through the reducers that, according to their filter criterias, may create a new state that replaces the one currently stored. Effort should be put into making sure that reducers never have any side effects.

So, to provide a TL;DR: