DEV Community

Cover image for ๐Ÿ“ฆWhat is Redux?
Himanay Khajuria
Himanay Khajuria

Posted on

๐Ÿ“ฆWhat is Redux?

If you are learning frontend development, especially with React, you may hear about Redux. At first, it sounds confusing. But donโ€™t worry ๐Ÿ˜Š I will explain it in very simple words.


๐Ÿค” Why Do We Need Redux?

Imagine you are building a React app.

You have:

  • A Login component ๐Ÿ”
  • A Profile component ๐Ÿ‘ค
  • A Cart component ๐Ÿ›’
  • A Navbar component ๐Ÿ“Œ

Now suppose the user logs in. Many components need to know:

  • Is the user logged in?
  • What is the user name?
  • What is inside the cart?

If we pass data from one component to another again and again, it becomes messy ๐Ÿ˜ต

This is called prop drilling.

So we need one central place to store all important data.

That is where Redux comes in ๐Ÿช


๐Ÿช What is Redux?

Redux is a state management library.

In simple words:

๐Ÿ‘‰ Redux helps us store and manage data for the whole application in one place.

Think of Redux like a big storage box ๐Ÿ“ฆ

All components can take data from it and also update it.


๐Ÿง  Important Concepts in Redux

There are 3 main parts you need to understand:

  1. Store ๐Ÿฌ
  2. Action ๐Ÿ“ข
  3. Reducer ๐Ÿ”

Letโ€™s understand each one with a simple example.


๐Ÿฌ 1. Store (The Big Storage)

The store is where all the data lives.

Example state:

    {
      count: 0
    }
Enter fullscreen mode Exit fullscreen mode

This is called state.

Think of store like:

  • A warehouse ๐Ÿ“ฆ
  • A bank locker ๐Ÿฆ
  • A memory box ๐Ÿง 

All data is saved here.


๐Ÿ“ข 2. Action (What You Want To Do)

An action tells Redux:

๐Ÿ‘‰ "Hey, I want to change something!"

Example action:

    {
      type: "INCREMENT"
    }
Enter fullscreen mode Exit fullscreen mode

This means:
Increase the count value.

Actions are simple JavaScript objects.

You can imagine action like:

  • Placing an order in restaurant ๐Ÿฝ๏ธ
  • Clicking a button ๐Ÿ–ฑ๏ธ
  • Sending a message ๐Ÿ’ฌ

๐Ÿ” 3. Reducer (The Decision Maker)

Reducer decides:

๐Ÿ‘‰ How the state should change.

Example reducer:

    function counterReducer(state = { count: 0 }, action) {
      if (action.type === "INCREMENT") {
        return { count: state.count + 1 }
      }
      return state
    }
Enter fullscreen mode Exit fullscreen mode

So:

  • Action says: "Increase"
  • Reducer says: "Okay, I will add 1"
  • Store updates the value

Reducer is like:

  • A chef ๐Ÿ‘จโ€๐Ÿณ who prepares food based on order
  • A machine โš™๏ธ that processes input and gives output

๐Ÿ”„ How Redux Works (Step by Step)

Letโ€™s say you click a button to increase count:

1๏ธโƒฃ You click button ๐Ÿ–ฑ๏ธ

2๏ธโƒฃ Action is sent ๐Ÿ“ข

3๏ธโƒฃ Reducer receives action ๐Ÿ”

4๏ธโƒฃ Store updates data ๐Ÿฌ

5๏ธโƒฃ UI updates automatically ๐ŸŽ‰

This flow is always in one direction.

This is called one way data flow.


๐Ÿ›’ Real Life Example (Shopping Cart)

Imagine you add product to cart:

  • You click "Add to Cart" ๐Ÿ›๏ธ
  • Action: { type: "ADD_ITEM" } ๐Ÿ“ข
  • Reducer adds item to cart ๐Ÿ”
  • Store updates cart ๐Ÿฌ
  • Cart icon shows new number ๐Ÿ”ข

Simple and clean ๐Ÿ˜„


๐Ÿ’ก Why Redux is Useful?

Redux helps:

โœ… Manage large application state

โœ… Avoid prop drilling

โœ… Keep data predictable

โœ… Debug easily

โœ… Maintain clean structure

It is very helpful in big projects where many components share data.


โš ๏ธ Is Redux Always Needed?

No โŒ

For small apps:
React useState or useContext is enough ๐Ÿ‘

Redux is useful when:

  • App is big
  • Many components share same data
  • State logic becomes complex

๐Ÿ†• What is Redux Toolkit?

Today we mostly use Redux Toolkit.

It makes Redux:

  • Easier ๐Ÿ˜Š
  • Cleaner โœจ
  • Less code ๐Ÿงน

Redux Toolkit is the modern way to use Redux.


๐ŸŽฏ Final Thoughts

Redux is just a tool to manage data in one place.

Remember this simple idea:

๐Ÿง  Store = Data

๐Ÿ“ข Action = What to do

๐Ÿ” Reducer = How to change

๐Ÿฌ Redux = Central manager

At first it may look difficult. But once you practice with small examples like counter app ๐Ÿงฎ or todo app ๐Ÿ“, you will understand it better.

Keep building projects for learning ๐Ÿ’ป

That is the best way to master Redux ๐Ÿš€

Top comments (0)