Introduction To Redux - Advanced React - Part One

As this is an advanced topic, before reading this article, I will suggest reading the below articles to have the basic understanding of React features and functionalities,

• ReactJS Fundamentals - Zero To Hero Series - Part One
• React Components - Zero To Hero Series - Part Two
• Introduction To JSX And Rendering Elements (React) - Zero To Hero Series - Part Three
• Introduction To State And Lifecycle (React) - Zero To Hero Series - Part Four

 

Recently, we have heard that Redux is very popular and has become the de facto standard. As a quick bit of evidence, Redux has more stars on GitHub than Flux. Over 50,000 stars for an open source project is impressive and that too in a very short span of time.

Redux has become React’s most popular data management library.

• Flux – https://github.com/facebook/flux
• Redux – https://github.com/facebook/react
  
  
  
  
  

 

In 2016, the Redux creator, Dan Abramov, joined the React team on Facebook.

Main features of Redux

1. Redux centralizes all your application states in one store.
2. Redux enforces keeping all states in a single centralized object graph.
3. Redux has an immutable store (which means the state cannot be changed).
4. You can instantly see the changes in your browser without losing your current client-side state, and time travel debugging which allows you to step forward and backward through state changes in your code.

The first question, which comes to our mind, is: Do I need Redux?

Answer

If you are building a very simple application, then you might want to use vanilla JavaScript. However, as you start to manipulate the DOM, make AJAX calls, and handle interactivity, then you can think of using jQuery. If it is very painful to write code in JavaScript or jQuery, then you can think of using React.

React has components, virtual DOM, synthetic events, pure functions etc. that helps us manage the complexity of our apps.

Now, as data flow gets more complex, there are situations when you have to display the same data in multiple places. There may be large state changes that are hard to manage. There may be a requirement to handle all the state changes in a single place for consistency. This is where React with Redux comes into the picture.

NOTE

Working with Redux requires a significant setup requirement.

Hence, we can say that for building an attractive application, we can use React alone; however, React with Redux is very useful for applications that have complex data flows. In addition, Redux is very helpful in a situation when same data is used in multiple places.

Redux Principles

Redux has 3 core principles.

• All your application states are placed in a single immutable store.
• The only way to mutate state is to emit an action, which describes a user’s intent.
• A state is changed by pure functions. These functions are called reducers.
  
  
  

In Redux, a reducer is just a function that accepts the current state in an action and returns a new state.

Redux Flow

Now, let’s look at how actions, reducers, store and container components interact to create unidirectional data flows. 

• An action describes user intent. It’s an object with some type property and some data. The action has a type.
• A reducer always handles the action. A reducer is just a function that returns a new state.
• Reducer receives the current state and an action, and then it returns a new state.
• Reducers typically contain a switch statement that checks the type of action passed. This determines what new state should be returned.
• Once this new state is returned from a reducer, the store is updated.
• The React components are connected to the store using React-Redux.

Summary

In this series of two articles, we saw the introduction of Redux and how it is helpful to use React with Redux to handle complex data flows. We also saw the core principles of Redux and how data flows in Redux.

In the next and last article of the Redux series, we will get an overview of Actions, Store and Reducers.