2022.03.23 Project 과정 중 typescript redux

TorysJourney를 하는 도중 생긴 오류.

일단 redux를 잘 몰라서.. typescript에서 redux를 사용하는 것이 여간 어색한 것이 아니었다. 일단 초기값을 잘 잡았어야 했고, redux로 제대로 된 값을 잘 가지고 오려면 action type 또한 잘 잡는 것이 핵심이었다.

//reducer

const initialState = {
  accessToken: "",
};

type Action = { type: "accessToken"; payload: string };
//payload로 e.target.value값을 dispatch로 받아와서 사용하는 것이 핵심.
export const Reducer = (state = initialState, action: Action) => {
  if (action.type === "accessToken") {
    console.log(state.accessToken);
    return { ...state, accessToken: action.payload };
  } else {
    return state;
  }
};

그런데 여기서 문제가 생겼다.

 const 홍왕열 = useSelector((김김) => console.log(김김));

이런식으로 써서 확인해봤더니 나오는 것은

그런데 여기서 나는 accessToken이 필요한데, Reducer에 접근이 불가한 것이었다.
일단 Reducer에 접근이 가능해야 accessToken을 쓰는데.

그래서 검색을 해보았다.

해본 결과 나온 것은

 Root Reducer에서 RootState 유형을 생성합니다.

export const rootReducer = combineReducers({
  dashboard: dashboardReducer,
  user: userReducer
});

export type RootState = ReturnType<typeof rootReducer>


상태 개체에 RootState 유형을 제공합니다.
  let userData = useSelector((state: RootState) => {
    return state.user.data;
  });

그런데 문제는 이런 식으로 하면 상태 개체가 rootReducer와 다른 곳에 있다면 state:RootState에서 RootState를 읽지 못한다.

그래서 export type RootState를 같은 곳에 넣었더니 되었다.

이해가 안 간다.

이번 프로젝트 끝나면 정말 redux랑 typescript를 쥐잡듯이 파봐야겠다.

노이해..