React, Axios and Redux: Asynchronously Fetch and Save Data to Local Storage (Excerpt)

In this tutorial, we’ll learn about many of Redux concepts by creating a simple React application from scratch using React, Redux, and Axios to asynchronously fetch and save data to Local Storage.

The application we’ll be building is a simple JavaScript Jargon app that’s based on the Simplified JavaScript Jargon available from this repository. We’ll export the entries as JSON data and we’ll consume it from our React application using Axios. The state will be handled by Redux.

For our demo application, We created a statically generated JSON API from the Simplified JavaScript Jargon GitHub repository.

Note: If you are consuming any other resource, make sure you have CORS enabled so the browser doesn’t disallow reading the remote resource due to the Same Origin Policy.

The app will also include a favorites page where you can add and delete your favorite JS terms from the jargon.

These are the steps of our tutorial:

• Step 1 — Installing Create-React-App & Initializing a React Application
• Step 2 — Installing Axios, Redux, React-redux and Redux-thunk
• Step 3 — Creating Redux Actions
• Step 4 — Creating Redux Reducers
• Step 5 — Creating the Redux Store
• Step 6 — Creating the React Component
• Step 7 — Saving Data to Local Storage

Introduction

Redux is an implementation of the Flux pattern - An application architecture for building user interfaces that are created and used by Facebook.

Redux is a library for managing the state of your application which is usually used with React, but it can also be used with other libraries and frameworks. It works by using a global state store common between all the components of the application.

Why Using Redux?

Redux is a good solution for medium and large apps that can help you handle complex state management requirements. But it’s not needed in every use case.

For example, if you have components with many children and you want to pass state down the children tree, you can use the React Context API for accessing state in any component at any level without passing state to components that don’t actually need it just because it’s needed by a child component.

For more information, read You Might Not Need Redux by Dan Abramov, the creator of Redux.

Prerequisites

We will need a few prerequisites for this tutorial, such as:

• A recent version of Node.js and NPM installed on your system,
• Knowledge of the essential concepts of modern JavaScript and React.

If you have the previous prerequisites, let’s get started with the first step where we’ll install the create-react-app utility and create a React app.

Read the full article 👈