Yesterday I started exploring Redux and one thing immediately stood out to me.
Redux feels very similar to React’s useReducer hook.
Yesterday I mostly observed and tried to understand the structure.
But today I finally started writing my own Redux code, and the similarities became even clearer.
Step 1: Creating the Initial State
Just like useReducer, the first thing we need in Redux is an initial state.
This initial state holds the starting values for our application.
For example, it might contain things like:
- account balance
- loan amount
- transaction history
All the default values are defined here before any action changes the state.
Step 2: Writing the Reducer Function
The next step is creating a reducer function.
This is also very similar to useReducer.
The reducer receives two things:
- state
- action
Inside the reducer we usually use a switch statement to handle different action types.
Each case checks the action type, and if needed it can also use the payload to update the state.
Something like:
- deposit
- withdraw
- request loan
Based on the action type, the reducer returns the next state.
Step 3: Creating the Redux Store
Here is where Redux becomes a little different from useReducer.
In useReducer, React manages everything inside the component.
But in Redux, we need to create a central store.
This is done using the createStore function that comes from Redux.
The store holds the entire application state and uses the reducer to update it.
This is considered the classic or old Redux method, but it is still important to understand it.
For anyone learning Redux for the first time, understanding this flow is very useful.
Step 4: Dispatching Actions
Once the store is created, we can dispatch actions to update the state.
Dispatching an action sends an object that contains:
- a type
- sometimes a payload
The reducer receives this action and decides how the state should change.
This flow looks like this:
Action → Dispatch → Reducer → New State
A More Advanced Way
There are also more modern and advanced ways to use Redux.
For example, developers often use action creator functions to simplify dispatching actions.
These helper functions make the code cleaner and easier to manage.
However, for this blog I focused only on the basic Redux flow, because understanding the fundamentals is more important at the beginning.
My Current Learning Progress
Right now, I’m still at the stage of understanding the classic Redux structure:
- initial state
- reducer
- store
- dispatch
- actions
Even though modern tools like Redux Toolkit simplify many of these steps, learning the original flow helps build a deeper understanding of how Redux works internally.
Final Thoughts
Today was the first day I actually wrote Redux code myself.
And the biggest realization was this:
Redux is not completely new.
If you already understand useReducer, Redux becomes much easier to understand because the core idea is very similar.
The main difference is that Redux moves this logic outside the component and manages state globally.
I’m still early in my Redux learning journey, but step by step the concepts are becoming clearer.
More experiments coming soon 🚀
Top comments (0)