Day 123 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 123 of my software development sprint! Today, I transitioned from traditional reactive states into state-machine territory by mastering the useReducer Hook in React! ⚛️ Unified State Management

When your app state shifts from primitive variables to complex data patterns containing multi-layer transformations, relying on unorganized useState setters spreads logic thin across files. Today, I centralized my component’s business logic completely into a single state processing hub!

🛠️ Deconstructing the Day 123 Action Pipeline

As captured across my workspace workspace template files in “Screenshot (274).png”, my state execution flow now implements strict architectural separation:

1. Designing the Pure Reducer function

• Formatted an isolated data processing engine (Reducerfunction) outside the UI class hierarchy to act as a pure function:

javascript
  function Reducerfunction(currState, action) {
      if (action.type === "NEW_ITEM") {
          return [
              ...currState,
              { name: action.payload.todoNameParas, date: action.payload.todoDateParas }
          ];
      }
      return currState;
  }

Enter fullscreen mode Exit fullscreen mode