Nerd For Tech
Published in

Nerd For Tech

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 Store

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

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.

The Action

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.

Putting it all Together

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.

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

Create Radio Inputs Easily in React Native

State vs Props

Promises: A walk through

Build A Command Line Application

Control Flow in JavaScript

How to add a Google Maps link in your website !

Design cancellable asynchronous callbacks

Build a complete real-time chat app with Laravel and Chatify

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniel C Reyes

Daniel C Reyes

Full-Stack Software Engineer / New York City / www.danielcreyes.dev

More from Medium

Redux is a right tool for your next project?

Optimizing Performance Using React.memo

All you need to know about ReactJS

BLoC pattern explanation with ReactJS