React redux

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.