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 👈

Comments

[Sung M. Kim]

Hi Ahmed,

Posts here on DEV.to should contain actual substantial content, not just be intended to promote another external work. From the Terms of Use:

Users must make a good-faith effort to share content that is...not designed primarily for the purposes of promotion or creating backlinks. Additionally, posts must contain substantial content — they may not merely reference an external link that contains the full post.

However, DEV Listings may be appropriate for this.
(See the rules there.)

Thank you.

[Sloan the DEV Moderator]

Hi there, we encourage authors to share their entire posts here on DEV, rather than mostly pointing to an external link. Doing so helps ensure that readers don’t have to jump around to too many different pages, and it helps focus the conversation right here in the comments section.

If you choose to do so, you also have the option to add a canonical URL directly to your post.