프론트엔드 디자인 패턴 (4) — Redux를 밑바닥부터: 타임트래블은 왜 공짜인가

type Action = { type: string; [key: string]: unknown };
type Reducer<S> = (state: S | undefined, action: Action) => S;
type Listener = () => void;
 
function createStore<S>(reducer: Reducer<S>, preloadedState?: S) {
  let currentState = preloadedState as S;
  let currentReducer = reducer;
  let currentListeners: Listener[] = [];
  let nextListeners = currentListeners;
  let isDispatching = false;
 
  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice();
    }
  }
 
  function getState(): S {
    if (isDispatching) {
      throw new Error('리듀서가 실행되는 동안에는 getState()를 호출할 수 없습니다.');
    }
    return currentState;
  }
 
  function subscribe(listener: Listener) {
    if (isDispatching) {
      throw new Error('리듀서가 실행되는 동안에는 subscribe()를 호출할 수 없습니다.');
    }
    let isSubscribed = true;
    ensureCanMutateNextListeners();
    nextListeners.push(listener);
 
    return function unsubscribe() {
      if (!isSubscribed) return;
      isSubscribed = false;
      ensureCanMutateNextListeners();
      nextListeners.splice(nextListeners.indexOf(listener), 1);
    };
  }
 
  function dispatch(action: Action) {
    if (isDispatching) {
      throw new Error('리듀서가 액션을 디스패치할 수 없습니다.');
    }
    try {
      isDispatching = true;
      currentState = currentReducer(currentState, action);
    } finally {
      isDispatching = false;
    }
 
    const listeners = (currentListeners = nextListeners);
    for (const listener of listeners) listener();
 
    return action;
  }
 
  dispatch({ type: '@@INIT' });   // 리듀서의 기본 상태를 채운다
 
  return { getState, dispatch, subscribe };
}

const unsubscribeA = store.subscribe(() => {
  console.log('A');
  unsubscribeB();          // A가 실행되는 도중에 B가 구독 해제된다
});
const unsubscribeB = store.subscribe(() => console.log('B'));
 
store.dispatch({ type: 'X' });

function counter(state = 0, action: Action) {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    default: return state;
  }
}

function combineReducers<S extends Record<string, unknown>>(
  reducers: { [K in keyof S]: Reducer<S[K]> }
): Reducer<S> {
  const keys = Object.keys(reducers) as (keyof S)[];
 
  return function combination(state = {} as S, action: Action): S {
    let hasChanged = false;
    const nextState = {} as S;
 
    for (const key of keys) {
      const previous = state[key];
      const next = reducers[key](previous, action);
 
      if (next === undefined) {
        throw new Error(`리듀서 "${String(key)}"가 undefined를 반환했습니다.`);
      }
 
      nextState[key] = next;
      hasChanged = hasChanged || next !== previous;
    }
 
    return hasChanged ? nextState : state;
  };
}

type Middleware = (api: MiddlewareAPI) =>
  (next: Dispatch) =>
    (action: Action) => unknown;

function compose(...funcs: Function[]) {
  if (funcs.length === 0) return <T>(arg: T) => arg;
  if (funcs.length === 1) return funcs[0];
  return funcs.reduce((a, b) => (...args: unknown[]) => a(b(...args)));
}

[f, g, h].reduce((a, b) => (...args) => a(b(...args)))
 
1회차: a=f, b=g  →  fg = (...args) => f(g(...args))
2회차: a=fg, b=h →  fgh = (...args) => fg(h(...args))
                        = (...args) => f(g(h(...args)))

function applyMiddleware(...middlewares: Middleware[]) {
  return (createStoreFn: typeof createStore) =>
    <S>(reducer: Reducer<S>, preloadedState?: S) => {
      const store = createStoreFn(reducer, preloadedState);
 
      let dispatch: Dispatch = () => {
        throw new Error('미들웨어를 구성하는 동안에는 dispatch할 수 없습니다.');
      };
 
      const middlewareAPI = {
        getState: store.getState,
        dispatch: (action: Action) => dispatch(action),   // ← 클로저로 늦게 바인딩
      };
 
      const chain = middlewares.map(mw => mw(middlewareAPI));
      dispatch = compose(...chain)(store.dispatch);
 
      return { ...store, dispatch };
    };
}

const logger: Middleware = (api) => (next) => (action) => {
  console.group(action.type);
  console.log('이전 상태', api.getState());
  console.log('액션', action);
  const result = next(action);        // 다음으로 넘긴다
  console.log('다음 상태', api.getState());
  console.groupEnd();
  return result;
};

const thunk: Middleware = (api) => (next) => (action) => {
  if (typeof action === 'function') {
    return (action as any)(api.dispatch, api.getState);   // 액션이 아니면 실행해 버린다
  }
  return next(action);
};
 
// 사용
const fetchUser = (id: string) => async (dispatch, getState) => {
  dispatch({ type: 'user/loading' });
  try {
    const user = await api.get(`/users/${id}`);
    dispatch({ type: 'user/loaded', payload: user });
  } catch (e) {
    dispatch({ type: 'user/failed', error: e });
  }
};

dispatch(fetchUser('42'));
// logger가 보는 것: [함수], 'user/loading', 'user/loaded'
// → action.type을 읽으면 첫 항목은 undefined다

const authGuard: Middleware = (api) => (next) => (action) => {
  if (action.meta?.requiresAuth && !api.getState().user) {
    return next({ type: 'auth/required' });   // 원래 액션을 삼키고 다른 걸 흘린다
  }
  return next(action);
};

function createTimeTravelStore<S>(reducer: Reducer<S>) {
  const actionLog: Action[] = [];
  let store = createStore(reducer);
 
  return {
    ...store,
    dispatch(action: Action) {
      actionLog.push(action);
      return store.dispatch(action);
    },
    // n번째 액션 직후 상태로 이동
    jumpTo(index: number) {
      store = createStore(reducer);                    // 초기 상태로 리셋
      actionLog.slice(0, index + 1).forEach(store.dispatch);   // 재생
    },
    // 특정 액션만 빼고 다시 계산 (DevTools의 "skip" 기능)
    skip(index: number) {
      const filtered = actionLog.filter((_, i) => i !== index);
      store = createStore(reducer);
      filtered.forEach(store.dispatch);
    },
  };
}

// 이러면 안 된다
function useStore<S, T>(store: Store<S>, selector: (s: S) => T): T {
  const [value, setValue] = useState(() => selector(store.getState()));
  useEffect(() => store.subscribe(() => setValue(selector(store.getState()))), []);
  return value;
}

function useStore<S, T>(store: Store<S>, selector: (state: S) => T): T {
  return React.useSyncExternalStore(
    store.subscribe,                       // 구독 등록 (해제 함수 반환)
    () => selector(store.getState()),      // 클라이언트 스냅샷
    () => selector(store.getState())       // 서버 스냅샷 (SSR용)
  );
}

// 매 렌더 새 배열 → 상태가 안 바뀌어도 무한 리렌더
const activeUsers = useStore(store, s => s.users.filter(u => u.active));

// (a) 메모이즈된 셀렉터 (reselect)
const selectActiveUsers = createSelector(
  [(s: State) => s.users],
  (users) => users.filter(u => u.active)   // users 참조가 같으면 이전 결과 반환
);
 
// (b) 커스텀 동등성 비교
const activeUsers = useStoreWithEqualityFn(
  store,
  s => s.users.filter(u => u.active),
  shallow
);

function create<T extends object>(
  createState: (set: SetState<T>, get: () => T) => T
) {
  let state: T;
  const listeners = new Set<(s: T, prev: T) => void>();
 
  const setState: SetState<T> = (partial, replace) => {
    const nextPartial = typeof partial === 'function'
      ? (partial as (s: T) => Partial<T>)(state)
      : partial;
 
    if (!Object.is(nextPartial, state)) {
      const prev = state;
      state = replace ? (nextPartial as T) : Object.assign({}, state, nextPartial);
      listeners.forEach(l => l(state, prev));
    }
  };
 
  const getState = () => state;
  const subscribe = (l: (s: T, prev: T) => void) => {
    listeners.add(l);
    return () => listeners.delete(l);
  };
 
  state = createState(setState, getState);
 
  function useStore<U>(selector: (s: T) => U = getState as any): U {
    return React.useSyncExternalStore(
      subscribe,
      () => selector(state),
      () => selector(state)
    );
  }
 
  return Object.assign(useStore, { getState, setState, subscribe });
}

const useCart = create((set, get) => ({
  items: [] as Item[],
  add: (item: Item) => set(s => ({ items: [...s.items, item] })),
  clear: () => set({ items: [] }),
  total: () => get().items.reduce((sum, i) => sum + i.price, 0),
}));
 
function CartBadge() {
  const count = useCart(s => s.items.length);   // 이 값이 바뀔 때만 리렌더
  return <span>{count}</span>;
}

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [] as Item[] },
  reducers: {
    add(state, action: PayloadAction<Item>) {
      state.items.push(action.payload);   // Immer 덕분에 "변형"처럼 써도 불변
    },
  },
});