As your react application gets larger, it gets harder and harder to keep track and maintain your states. This is where Redux can come in to help; it is a state management library that provides you with a central state (called the store), eliminating the need to pass props between components.

A quick run through of how Redux works:

1. Create the store
2. Passing in a reducer as an argument
3. Reducer update states accordingly based on the type of actions that are dispatched

If you don’t already know what Redux is, I’ll recommend you to first read my other article on Redux here.

Getting Started

To get started, we first have to install three packages redux, react-redux, and redux-thunk

npm install redux react-redux redux-thunk

Note: redux is simply a JavaScript library that is used with UI frameworks like React and Vue.js while react-redux is a library that we need to use to connect react and redux together. As for redux-thunk, it is a middleware which I’ll explain more in detail in a bit

Jumping In

First things first, we’ll need to create the store and the reducer, where the reducer will be passed in as our argument when creating the store.

#redux #react #javascript #programming #web-development