Introduction To Redux - Advanced React - Part Two

In this article, we will see what Actions, Store. and Reducers are in Redux. Before you start reading this article, I will suggest you read the first part of this Redux series to have a basic understanding of Redux features and functionalities,

• Introduction To Redux - Advanced React - Part One

Actions

The events happening in the application are called actions. Actions are just plain objects containing a description of an event.

Action Example

An action must have a type property. In the above example, “rating” is a property, which could be a complex object, a simple number, a Boolean, or any other value that is serializable. Do not pass functions or promises because they are not serialized to JSON.

Store

In Redux, you create a store by calling createStore in your application’s entry point. You pass the createStore function to your reducer function. Store simply stores the data. There is always a single store in Redux, which makes the application easier to manage and understand.

The Redux Store API is very simple.

• The store can dispatch an action.
• The store can subscribe to a listener.
• The store can return its current state.
• The store can replace a reducer (Supports hot reloading).
  
  
  

NOTE

There is no API for changing data in the store. It means the only way you can change the store is by dispatching an action.

Now to get an overview of Reducers, we will first understand what Immutability is.

Immutability means – To change state and return a new object.

It means that instead of changing your state object, you must return a new object that represents your application’s new state.

As we know, some types of JavaScript are already immutable, such as number, string, Boolean, undefined and null. In other words, every time you change the value of one of these types, a new copy is created.

Mutable JavaScript types are objects, arrays, and functions.

NOTE

Redux depends on immutable state to improve performance. In other words, a state is immutable in Redux.

There are 3 core benefits to having immutable state

1. Clarity
   When the state is updated, you know exactly where and how it happened. It means you know that someone has written the code in a reducer that returned a new copy of the state. It means you are clear about what file to open to see state changes.

2. Performance
   Let’s say we have a large state object with many properties. If state were mutable, Redux would have to do an expensive operation to determine if state is changed. It would have to check every single property on state object to determine if state had changed.
   
   However, if state is immutable, then this expensive operation of checking every single property is no longer necessary. Instead, Redux so a reference comparison. If the old state is not referencing the same object in memory, then we know that the state has changed.

3. Good Debugging

Reducers

To change the store, you dispatch an action that is ultimately handled by a reducer. A reducer is a function that takes state and an action and returns a new state.

Reducers must be pure functions. Therefore, there are three things which you should never do in Reducers

• Mutate Arguments
• Perform side effects like API calls and routing transitions
• Call non-pure functions

A reducer’s return value should depend solely on the values of its parameters.

NOTE

In Redux, we have 1 Store and can have multiple reducers.

When the store is created, Redux calls the reducers and uses their return values as an initial state. All reducers get called when an action is dispatched. The switch statement inside each reducer looks at the action type to determine if it has anything to do.

Each reducer only handles its slice of state.

Summary

In this article, we saw what actions, store, and reducers are in Redux. We also saw an overview of what Immutability is and why it is important.

<<Click here for previous part