Nimra Kosar

Posted on Aug 16

Redux in react

#webdev #programming #javascript #beginners

Redux in React:

A Beginner’s Guide that Doesn’t Waste Your Time
Why you should care (and when you shouldn’t)

For more detail visit this link:
https://nimracode.hashnode.dev/redux-in-react

1. What is Redux?

In React apps, managing data can sometimes get messy. Passing data to multiple components and keeping everything updated quickly becomes confusing.

👉 This is where Redux helps.
Redux gives you a single box (store) where all your data lives. Every component can directly read from or update this box.

Simple analogy:

React components = family members 👨‍👩‍👧‍👦

Redux store = fridge 🧊🍕

Whenever a member needs food (data), they grab it from the fridge. No need to constantly ask each other for it.

2. Why Use Redux?

Redux is useful when:

Your app gets large and passing props everywhere feels painful.

You want your data safe and centralized.

You want easier debugging and better control.

For small apps, Redux is not necessary. React’s useState or Context API is usually enough.

3. The 3 Main Parts of Redux

Redux = 3 key pieces:

Store → Where your data lives.

Actions → “What needs to be done” (e.g., add todo, delete todo).

Reducers → “How the data changes.”

The flow looks like this:

👉 Component → sends Action → Reducer updates data → Store holds new data → UI updates automatically.

Redux is for predictable global state — data that many components need (like auth user, shopping cart, theme, feature flags, cached server data).

If your app is small or state is local (like form fields or simple toggles), just use React state or Context. Don’t swing a hammer at a thumbtack.

Modern Redux = Redux Toolkit (RTK)

The old boilerplate is gone. If any tutorial tells you to write manual action types and giant switch reducers — walk away.

The Mental Model (30 Seconds)

Store: one object holding your app state.

Slice: a focused piece of the store (e.g., auth, todos) with reducers.

Action: a plain object describing “what happened.”

Reducer: pure function → (state, action) → newState.

Dispatch: send an action to update state.

Selector: read a piece of state (optionally memoized).

With RTK

Write slices with createSlice.

Handle async with createAsyncThunk.

Configure everything with configureStore.

Use React with Provider, useSelector, and useDispatch.

Project Setup (JS or TS)

# JavaScript
npm i @reduxjs/toolkit react-redux

# TypeScript (adds types automatically)
npm i @reduxjs/toolkit react-redux @types/react-redux

Folder Structure

src/
  app/
    store.ts
  features/
    counter/
      counterSlice.ts
      Counter.tsx
  main.tsx

Step 2: Create the Store

// store.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Step 3: Create a Slice (Actions + Reducer together)

// counterSlice.js
import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Step 4: Connect Store to the App

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Step 5: Use Redux in a Component

// Counter.js
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./counterSlice";

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default Counter;