A Beginner’s Guide To Redux

A Beginner’s Guide To Redux

According to the official website of Redux, “it is a predictable state container for JavaScript apps.”

According to the official website of Redux, “it is a predictable state container for JavaScript apps.”

The above definition can be broken down into three parts —

  1. Redux is a library for JavaScript applications — It is not only for React, but can also be used with Angular, Vue or vanilla JavaScript.
  2. Redux is a state container — It stores and manages the state of an application.
  3. Redux is predictable — It is possible to keep track of all the state changes.

Redux Concepts

  1. State — The state in redux is stored in plain JavaScript object.
  2. Action — It is also a plain JavaScript object with a type field that specifies how to change something in the state.
  3. Reducer — It is a pure function that takes the current state and action as input and return a new state. It updates data immutably, i.e.- it doesn’t modify the previous state but returns a new state.

Now, let’s understand the above three core concepts of redux with an example.

Suppose, there is a book shop, where a customer will go and tell the shopkeeper that he wants a book. The shopkeeper will go to the inventory and take out one book and will hand it over to the customer. During this process, one book gets deducted from the inventory.

So, here the book shop is the store that holds the state of the application. The customer describing his need to the shopkeeper is the action, and the shopkeeper is the reducer, who actually changes the state.

redux react

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native Redux | How To Use Redux In React Native

React Native Redux Example Tutorial From Scratch. We connect the React Native app to Redux store to save and retrieve the application data.

React and React Redux — Connecting to Redux

Redux is a light weighted State Management Tool that helps the components in our React App to communicate with each other. The simple concept behind this is that every state of the component is kept in a store that will be global. So that every component can access any state from that store.

Accessing Redux from Components In React & React Native

How to set up a basic version of Redux in your React or React Native application. To make things clearer, I based my setup on my event application, where users create events that other users attend. We generated the action creators, reducers, and Redux store, and wrapped the application in a provider.

A Basic Redux Setup in React/React Native

Redux is a powerful state management tool that can be very useful as your React or React Native application grows and requires you to keep track of more state.