dispatch와 Reducer를 이용한 Redux 작동 원리 파헤치기

며칠간 redux를 공부하며 이 작동 원리를 드디어 어렴풋이 깨달았다. 아직도 완벽한 건 아니지만 GPT와 대화하며 아웃라인은 잡았다고 생각한다. 아래는 내가 이해한 작동 원리이다.

Reducer 필요 파일

App.tsx

import React from 'react';
import { Provider } from 'react-redux';
import Clock from './components/Clock';
import { useStore } from './store';

const App = () => {
  const store = useStore();

  return (
    <Provider store={store}>
      <Clock />
    </Provider>
  );
};

export default App;

Clock.tsx

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { AppState } from '../store';

const Clock = () => {
  const today = useSelector<AppState, Date>((state) => state.today);

  const dispatch = useDispatch();
  useEffect(() => {
    const id = setInterval(() => dispatch({ type: 'setToday', today: new Date() }), 1000);

    return () => clearInterval(id);
  }, [dispatch]);

  return (
    <div className="flex flex-col items-center justify-center p-2">
      <p className="text-3xl text-blue-600">{today.toLocaleTimeString()}</p>
      <p className="text-2xl text-blue-400">{today.toLocaleDateString()}</p>
    </div>
  );
};

export default Clock;

rootReducer.ts

import type {Actions} from './actions'
import type {AppState} from './AppState'

const initialAppState = {
  today: new Date();
}

export const rootReducer = (state: AppState = initialAppState, action: Actions) => {
  switch (action.type) {
    case 'setToday':
      return { ...state, today: action.today };
    default:
      return state;
  }
}

useStore.ts

import { configureStore } from '@reduxjs/toolkit';
import { useMemo } from 'react';
import { rootReducer } from './rootReducer';

const initializeStore = () => {
  const store = configureStore({ reducer: rootReducer, middleware: [] });
  return store;
};

export function useStore() {
  const store = useMemo(() => initializeStore(), []);
  return store;
}

Reducer 작동 원리

1. Clock.tsx에 있는 dispatch 함수가 Redux store에 action을 보낸다.
2. store 안에는 rootReducer 함수(내가 만든)가 있고, 이 함수는 dispatch에서 보내준 action type에 따라 store안에 있는 state를 변경한다.
3. store에 있는 state가 바뀜에 따라 useSelector 훅을 사용중인 컴포넌트(Clock.tsx)가 re-render된다.