FULL REDUX INTERNAL

Source: Dev.to

Redux Internal Flow Diagram

┌─────────────────────────────┐
│        Your Component        │
│   dispatch(action)           │
└──────────────┬──────────────┘
               │
               ▼
┌─────────────────────────────┐
│        Store.dispatch        │
└──────────────┬──────────────┘
               │
               ▼
┌─────────────────────────────┐
│      Middleware Chain        │
│ (logger → thunk → custom..) │
└──────────────┬──────────────┘
               │
               ▼
┌─────────────────────────────┐
│           Reducer            │
│  newState = reducer(old, a)  │
└──────────────┬──────────────┘
               │
               ▼
┌─────────────────────────────┐
│      Store Updates State     │
│    state = newState (new ref)│
└──────────────┬──────────────┘
               │
               ▼
┌─────────────────────────────┐
│ React-Redux Subscriptions   │
│  useSelector listeners       │
│  compare prev vs next        │
└──────────────┬──────────────┘
               │
               ▼
┌─────────────────────────────┐
│     React Re-renders UI      │
└─────────────────────────────┘

Simplified Redux Store Implementation

// ------------------------------
// Mini Redux Implementation
// ------------------------------

function createStore(reducer) {
  let state = reducer(undefined, { type: "@@INIT" });
  let listeners = [];

  return {
    getState() {
      return state;
    },

    dispatch(action) {
      state = reducer(state, action);
      listeners.forEach((l) => l());
      return action;
    },

    subscribe(listener) {
      listeners.push(listener);
      return () => {
        listeners = listeners.filter((l) => l !== listener);
      };
    },
  };
}

function combineReducers(reducers) {
  return function rootReducer(state = {}, action) {
    const nextState = {};

    for (let key in reducers) {
      nextState[key] = reducers[key](state[key], action);
    }

    return nextState;
  };
}

Example Reducers and Store Usage

// ------------------------------
// Example Reducers
// ------------------------------

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case "INCREMENT":
      return { value: state.value + 1 };
    case "DECREMENT":
      return { value: state.value - 1 };
    default:
      return state;
  }
}

function userReducer(state = { name: "" }, action) {
  switch (action.type) {
    case "SET_NAME":
      return { name: action.payload };
    default:
      return state;
  }
}

// ------------------------------
// Combine reducers & create store
// ------------------------------

const rootReducer = combineReducers({
  counter: counterReducer,
  user: userReducer,
});

const store = createStore(rootReducer);

// ------------------------------
// Demo Usage
// ------------------------------

store.subscribe(() => {
  console.log("State updated:", store.getState());
});

store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "DECREMENT" });
store.dispatch({ type: "SET_NAME", payload: "Zeeshan" });

Key Points

• createSlice (from Redux Toolkit) auto‑generates action creators.
• Component dispatches an action → optional middleware → slice reducer (generated by createSlice).
• Immer produces an immutable newState.
• Redux store updates its reference to the new state.
• React‑Redux selectors compare previous and next state slices.
• If a selector’s result has changed, the connected component re‑renders.