React redux

Mitchel Gitau — Wed, 24 Sep 2025 07:09:20 +0000

Recently, I was assigned a task that opened my eyes to the power of Redux.

The task was simple in theory: have one central point for switching between branches in an admin dashboard.

The dashboard had multiple components, Orders, Products, Stock Valuation, and whenever a user selected a branch, all these components needed to show only the data for that branch.

Why not just query params?

At first, my instinct was to put the branch in the URL as a query parameter, like:
/dashboard?branch=NairobiWarehouse

This would work for a single filter, but my senior quickly pointed out the downsides.

Imagine later adding filters for date, status, or user.
The URL would become long and messy.

This is exactly where Redux shines.

What is Redux?

Redux is a state management library for React apps.

Think of Redux like a note on your fridge:

Any family member can read the latest note.
Any family member can update it (dispatch an action).
The note always has the latest agreed information.

So we put the branch filter on the “note,” and every component can read it.

Setting Up Redux (Beginner-Friendly with Redux Toolkit)

1. Create the store and slice

// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit'

// Slice of state for the branch filter
const branchSlice = createSlice({
  name: 'branch',
  initialState: { selected: null },
  reducers: {
    setBranch: (state, action) => {
      state.selected = action.payload
    }
  }
})

// Export action
export const { setBranch } = branchSlice.actions

// Create the store
export const store = configureStore({
  reducer: {
    branch: branchSlice.reducer
  }
})

Store → The note itself.
It’s where the current branch selection is written down.
Everyone (all components) can check it anytime.
Slice → A section of the note that focuses on one thing.
Here we’re only tracking the branch filter, so we made a branch slice.
(Later you could add a user slice, theme slice, etc.)
Initial state → What’s written on the note at the start.
In this case: { selected: null } → meaning no branch is picked yet.
Reducer → The rules for how the note can change.
Example: setBranch says: “whenever someone picks a branch, update the note with that new branch.”
Action → The note you send to trigger a change

e.g. dispatch(setBranch("NairobiWarehouse")) tells Redux:
“Hey, update the note and write NairobiWarehouse on it.”

2. Update the branch filter
When a user selects a branch in the Dashboard, dispatch an action to the store:

// Dashboard.js
import { useDispatch } from 'react-redux'
import { setBranch } from './store'
export default function Dashboard() {
  const dispatch = useDispatch()
  return (
    <button onClick={() => dispatch(setBranch("NairobiWarehouse"))}>
      Switch to Nairobi
    </button>
  )
}

3. Read the branch filter from the store
Now, any component can read the branch filter directly:

// OrdersList.js
import { useSelector } from 'react-redux'
export default function OrdersList() {
  const branch = useSelector((state) => state.branch.selected)
  return <div>Showing orders for {branch || "no branch selected"}</div>
}

What does useSelector do?

useSelector is a React-Redux hook that lets components read state from the store.

It subscribes the component to that part of the store, so whenever the value changes, the component will automatically re-render.

In our example, if the user switches from branch Nairobi to branch Kisumu, OrdersList, ProductsList, and StockValuation will all re-render with the updated branch filter.

Before Redux, I struggled with passing filters around and making components talk to each other. With Redux, I finally see how one central store can simplify everything.

Understanding useState in React

Mitchel Gitau — Sat, 09 Aug 2025 18:39:56 +0000

useState is a native state management hook in React that allows components to keep track of state between renders.

Logical Breakdown of `useState`:

Define the initial state:
- useState(10) → Initializes a number.
- useState("") → Initializes an empty string.
- useState(() => "Jack") → Uses a lazy initialization function.
Destructure the returned array:
- useState returns an array with two values:
  - The current state value
  - A function to update the state
- Example:
```
const [name, setName] = useState("");
```
Update state using the setter function (setState)
- Directly modifying the state variable won't trigger a re-render.
- Always use the setter function to update state:
```
setName("Alice"); // Correct 
name = "Alice"; // Won't update state
```

Why use `setState` instead of modifying the variable?

For primitive data types (numbers, strings, booleans):
- Changing the variable only creates a local copy. React won’t recognize the change*.*
For reference types (arrays, objects):
- Modifying the variable directly mutates the original state, which React might not track.
- Best practice is to spread the existing state and then update it.

Updating an Array in State (Best Practice)

const [items, setItems] = useState(["Apple", "Banana"]);

// Incorrect(Direct mutation)
items.push("Orange");
setItems(items);

// Correct (Create a new array)
setItems([...items, "Orange"]);

Updating an Object in State (Best Practice)

const [user, setUser] = useState({ name: "Jack", age: 25 });

// Incorrect (Direct mutation)
user.name = "Alice";
setUser(user);

// Correct (Create a new object)
setUser({ ...user, name: "Alice" });

DEV Community: Mitchel Gitau