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.
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
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.
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.
We will need a few prerequisites for this tutorial, such as:
- A recent version of Node.js and NPM installed on your system,
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.