Redux Basics

State management is an important aspect of an application. An application's state is the values in your application at any point in time. For example, in the front-end of an application when there is a form the initial value within each form input box will be an empty string. When the user types in each input box this "state" changes and these values within state change.

As you can see anytime the user interacts with the application many values have the possibility of changing and can affect the state. In a small application keeping track of these state changes is fairly stress-free. As the application grows it can become more problematic to keep track of 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.

import { createStore } from "redux";
import mainReducer from "../reducers/index";

const store = createStore(mainReducer);

export default store;

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.

const state = {
 reviews: []
};

function mainReducer(state , action){
 return state;
}

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.

payload: { title: 'New Restaurant Review', id: 1 }

export function addReview(payload) {
  return { type: "ADD_REVIEW", payload }
};

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-

const state = {
 reviews: []
}

function mainReducer(state, action){
 if(action.type = "ADD_REVIEW"){
  return Object.assign({}, state, {
   reviews: state.reviews.concat(action.payload)
  });
 }
 return state
}

export default mainReducer;

Here you can see that this reducer receives an action and the action type is checked within the if conditional. If the type is an "ADD_REVIEW" type then we return a new state being careful to keep the reducer as a pure function. In order to keep it a pure function it uses Object.assign to assign a reviews property to a new object and concat in order to add a new review to the current values within the reviews array without mutating the original reviews array.

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.

• The getState method (store.getState()) retrieves the state of the application.

• The dispatch method (store.dispatch(action))sends out an action in order to change the state.

• The Subscribe method (store.subscribe(() => console.log('run some code'))) is for listening to the state's changes and when it does change maybe running some code in response to it.

So there you have it, a very basic explanation of Redux in order to get you started with the library and get you on your way to learning more complex topics within the library. The Redux library is framework agnostic and can be used within many popular frameworks, notably the React framework. In fact, there is a library you can use called react-redux in order to more easily connect react with redux and it is worth exploring.