Tools: Writing My First Redux Code — And Realizing How Similar It Is to useReducer

Step 1: Creating the Initial State ## Step 2: Writing the Reducer Function ## Step 3: Creating the Redux Store ## Step 4: Dispatching Actions ## A More Advanced Way ## My Current Learning Progress ## Final Thoughts 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. 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: All the default values are defined here before any action changes the state. The next step is creating a reducer function. This is also very similar to useReducer. The reducer receives two things: 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. Based on the action type, the reducer returns the next state. 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. Once the store is created, we can dispatch actions to update the state. Dispatching an action sends an object that contains: The reducer receives this action and decides how the state should change. This flow looks like this: Action → Dispatch → Reducer → New State 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. Right now, I’m still at the stage of understanding the classic Redux structure: 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. 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 🚀 Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse - account balance - loan amount - transaction history - request loan - sometimes a payload - initial state