React Redux Connect in State Management

by Bagas Dimas Permadi, Programmer at Mitrais

What is Redux?

Redux is a tool used to control both data-state and UI-state in JavaScript applications. Since managing state over time can be complex, Redux is ideal for Single Page Applications (SPAs). It is also framework-agnostic, which means that, although it was written with React in mind, it can be used with Angular or a jQuery applications.

Several important qualities of Flux have inspired the creation of Redux. Similar to Flux, Redux recommends that you focus your model update logic in a specific layer of your application (“stores” in Flux, “reducers” in Redux). In this case, both Redux and Flux instruct you to define every mutation as a plain object called an “action”.

Why use Redux?

  1. It's simpler to learn than Facebook's FLUX singleton approach
  2. Compared with other solutions, Redux is more powerful.
  3. It also offers many features which are unique and very useful in real life web apps development (like immutability).
  4. It's the most used solution within the React community. Redux is the standard tool for use in uni-directional data flows.
  5. Server side rendering with Redux is great. As a server-side for React applications, Redux is still one of the best. This feature is not only unique, but it is also useful. It is mostly used on websites where the user experience must be first-class (the lower latency of the server's response, the better). For example: AirBnb and the most popular news services have server rendering implemented, so that their users get content served much quicker than in a regular (non server-side rendering) single-page-application.

Redux can be described in 5 ideas:

  1. All of your application's data is in a single data structure called the state which is held in the store.
  2. Your app reads the state from this store.
  3. Mutation of the state never happens outside the store.
  4. The views emit actions that describe what happened.
  5. A new state is formed by linking the old state and the action by a function called the reducer.

Redux can be narrowed down into the following:

  • The store manages the states and usually there is a method to dispatch an action. In a Redux app, you can acquire it's states through store.getState()
  • An action is a simple JavaScript object. It can also be regarded as a command to change a state.
  • The reducer decides how to alternate a state after receiving an action. Therefore it can be seen as the entrance to a state change. A reducer is also comprised of functions, and it alternates states by perceiving an action as an argument, which then returns a new state.
  • The middleware is the middleman between a store.dispatch() and a reducer. The purpose of the middleware is to intercept an action that has been dispatched, and modify or even cancel the action before the reducer receives it. For the example, if we want to log some state value before and after the action, we don’t need to log the action and the next state every time you call store.dispatch(action). We can use middleware to intercept that process and log the value before and after an action has been dispatched.

Logging manually (without middleware)

Logging using middleware

How Redux works with React

React data flow is called "unidirectional data flow", which indicates that data flows in one direction from parent to child. In this case, it's not clear how two non-parent-child components would communicate in React:

Pict 1. React’s data flow without Redux

This approach is regarded as poor practice by many, because direct component-to-component communication is error prone and can lead to spaghetti code.

This is where Redux is very helpful. Redux provides the solution of storing all your application state in one place, called a "store". Afterwards, components "dispatch" state changes to the store, instead of directly to other components. The components that need to look out for state changes can "subscribe" to the store:

Pict 2. React’s data flow with Redux

With Redux, components don't communicate directly with one another, but rather all state changes must go through the single source of truth - the store. All components receive their state from the store. It's also clear that components should send their state changes to the store as well. The component initiating the change is only involved with dispatching the change to the store, and does not interact with other components that need the state change. This is how Redux makes data flow easier to discuss.


Get the latest news from us to your inbox

(Weekly newsletter)

Leave a comment

from Indonesia:
from Australia:
from New Zealand:
from Singapore:
Our social media
© Copyright 1991 - 2022 Mitrais