[React] store의 값과 useSelector가 연결되는 과정

export const rootReducer = combineReducers({
    user: userReducer,
    categories: categoriesReducer,
    cart: cartReducer,
});

export const store = createStore(rootReducer, undefined, composedEnhancers);

console.log(store.getState())

• 먼저 root-reducer.js에 저장된 세 가지 reducer을 store에 담는다.

• console.log(store.getState())을 찍어보면 위 사진처럼 나온다. 각각의 변수에 reducer들의 초기 상태값이 담겨있다.

외부 컴포넌트와 store 연결

const currentUser = useSelector(selectCurrentUser);

• useSelector은 store의 상태값을 불러오는 역할을 하는 redux hook이다.

export const selectCurrentUser = (state) => state.user.currentUser;

• 위에서 본 store에서 user, 그리고 user의 상태값인 currentUser을 불러온다.

userReducer.tsx

const INITIAL_STATE = {
  currentUser: null,
};

export const userReducer = (state = INITIAL_STATE, action) => {
  const { type, payload } = action;

  switch (type) {
    case USER_ACTION_TYPES.SET_CURRENT_USER:
      return {
        ...state,
        currentUser: payload,
      };
    default:
      return state;
  }
};

• 앞으로 이 reducer을 통해 상태값이 변경되면 useSelector을 쓴 컴포넌트가 리렌더링될 것이다.