What is Redux? What is action, reducer and store in Redux

In this blog we will discus about the redux, what is Redux and how you can use it in React application.

What is Redux?

Redux is a open source JavaScript library, Which is used for state management.

Redux is mostly used with popular frameworks like React and Angular

It provides direct access to the components for the data

It also provides centralized store for application state

It provides consistency of data across the application, so any component can access data from a central store anytime.

Why we use Redux in React Application?

In React we cannot access data directly from one component to another component, we have to pass the data through the props to access it.

Parent to Child and Child to Parent communication between the components is required, to understand this you can check our this blog Passing Events from parent to child component in React JS

But this type of communication makes application more complex and difficult to manage.

For small applications it can be good but in case of large application it will be very difficult to manage.

What is action, reducer and store?

To understand how redux works let’s take a look at its life cycle.

Redux has three main features.

Actions, Reducers and Store.

Actions

Actions is when a application do an action like create, delete, update etc.

Actions folder have all the actions related files for different components, for example, pages, posts, articles etc.

Action have two type of properties , type and payload. Type is basically a action type like ADD_COURSE, ADD_PAGE and payload is the data we pass through the action.

Reducers

Reducers are the functionality take take place when a action occur for example if action is ADD_COURSE then the reduce for this action will add this course to a object and that object will get updated in store where all the state got stored.

Reducers first check with central store for the value of old state for the current action and then update it to according to changes coming with new payload and it return a new state to the store.

Store

Redux have a central store where all the application states are store and when a reducer update store with new state of a component then a subscription occurs and it pass the new state to the props of component and the component get updated with new changes.

How Redux Works?

This is how redux work, first action take place, it calls reducer to do the necessary changes to the state and update it then this updated state get updated in store and this creates a subscription and by this subscription this new state get pass to the props of component and component get updated with changes.

Related Posts

frontbackgeek-images

Unveiling React Query: Building a Task Manager App with useMutation and useQuery Hooks

In this article, we will build a Task Manager app to understand What is React Query? and How to use React Query useMutation, and React Query useQuery…

frontbackgeek-images

Building Forms with Formik in React: Complete Code Examples and Explanations

In this article, we are building a simple form to understand how to build a form with Formik in React application, Here we are building a simple…

frontbackgeek-images

Creating React antd table with sorting and pagination and using antd select and antd modal for filtering and displaying the data.

In this article we are creating an antd table with React antd library, antd library is an ant design library, which has a rich set of components…

frontbackgeek-images

React Virtualized Tables: Enhancing the Performance of React 18 Applications

In this article, we will explore the concept of React Virtualized Tables as a solution to enhance performance in rendering large tables. We will delve into what…

React Native Expo Error Solution : ERROR Invariant Violation: “main” has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it, and restart it in the current project.

Solution is Reinstall with this Restart and Rescan the app

frontbackgeek-images

Exploring useLayoutEffect VS useEffect in React 18: A Deep Dive with Code Examples and Practical Comparisons

In React.js, Hooks are very important for handling state and for other features related to functional components, useLayoutEffect vs useEffect is a hot topic, because both are…

This Post Has 2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *