Getting Started with Redux

State management is a key aspect of any application. An application’s state is the values in your application at any point in time. A common example of state in an application is when there is a simple form, the initial value within each form input box will be an empty string, once the user types in the input into a box, the state changes, and the values within state change.

Anytime a user interacts with an application many values have the possibility of changing and can have an effect on the state. In a small application, such as a simple form, keeping track of these state changes can be fairly easy. As the application grows it can become more of a challenge to keep track of the state that is used and changed in various parts of the application and in different functions within the application.

To solve this problem state management becomes important. One such popular state management tool is the Redux library.

The Redux library can be used with a variety of front-end frameworks. In the Redux library, the three main pieces that orchestrate state management are the store, the reducer, and the action.

The first piece that orchestrates state management is the store. The store will hold the state and the code responsible for changing, listening to, and retrieving the state. A store is created by calling the create store function from the Redux library and passing in a reducer function.

The reducer that is passed into the store is responsible for creating the state. This reducer is a function in the redux library that takes two parameters. The current state and the action (instructions to change the state).

The key characteristic of the redux reducer is that it does not mutate the state in place, it is a pure function. A pure function is one that will produce the same output for a given input. Instead of mutating the state in place, the redux reducer will instead return a new state. The React framework for example does not use a pure function to change the state. In order to change the state, you call the setState() method. This method mutates the original state in place.

To see a reducer in action we can look at this basic reducer function.

This example reducer doesn’t do much at the moment. It just returns the state. Next, we will dive into what the action does and its role in working with the reducer to produce state.

An action is an object that is dispatched in order to notify that the state needs to be changed. This action has two properties. A type and a payload. The type property is the type of action that will be taken to change the state. The payload is the changes that will be incorporated into the state. The type property is required the payload property is not. Here is a simple example.

Here you can see that the action object is wrapped in a function. This is a best practice in Redux. This is so the creation of the object is abstracted away. The addReview function produces an action with the action type to add a new review and a payload that has the new review to be added.

Now to show the reducer and the action working together to produce a state we have the following code-

Now you may be thinking — how is an action sent?, how can I execute code when the state is changed? and how can I retrieve the state at any time? For this, the redux library has three methods that can be called on the store. These methods are getState, dispatch, and subscribe.

Related posts:

In a world that is ever-changing and fast-moving, a state-of-the-art IGA program needs to be the priority for every company to achieve the utmost stability. ECM is considered as a medium of…

A Splash Screen referred to as a launch screen or startup screen and shows up when your app is loading, and its perfect implementation is discussed here.

YaHallo!. Back with me Afry Geogana!. Here we will try stock analysis with sentiment on Twitter. So there are many factors that we cannot predict about the ups and downs of stock prices. But is it…