Hook 안쓰고 바로 redux에 접근하기

지금까지 redux에 접근하기 위해선 selector 등으로 접근해야 하는 줄 알았지만, 그건 기초가 부족한, 사용법만 아는 상태였던것 같다.

auth로직을 구현하면서 interceptor의 response에 응답에 따른 리덕스 상태를 변화시키는 로직을 짜고 싶었다.

그러나, use훅을 쓰기엔 여러가지 typescript로직에 걸리는게 많았고 계속 오류가 발생해서 코드가 돌아가지 않았다.

하루를 삽질했는데, 스택오버플로우에 글이 대놓고 있었다.

import reduxStore from './store';

import App from './components/App';

const router = (
  <Provider store={reduxStore}>
    <Router>
      <Route path="/" component={App}/>
    </Router>
  </Provider>
);

/** Intercept any unauthorized request.
* dispatch logout action accordingly **/
const UNAUTHORIZED = 401;
const {dispatch} = reduxStore; // direct access to redux store.
axios.interceptors.response.use(
  response => response,
  error => {
    const {status} = error.response;
    if (status === UNAUTHORIZED) {
      dispatch(userSignOut());
    }
   return Promise.reject(error);
 }
);

render(router, document.getElementById('app-root'));

스택오버플로우에 나온 코드

const { dispatch } = store; //<<여기

serverAxios.interceptors.response.use(
  res => res,
  async err => {
    const {
      config,
      response: { data, status },
    } = err;
    const URL = `${COMEON_API_URL}/api/v1/auth/reissue`;

    if (config.url === URL || status !== 401 || config.sent) {
      return Promise.reject(err);
    }

    // 헤더가 없는 경우 => 로그인 요청
    if (data.errorCode === 1102) {
      errorAlert('인증헤더를 찾을 수 없습니다. 다시 로그인해 주세요');

      return config;
    }

    // 액세스 토큰이 만료된 경우 => 리프레쉬 토큰 발급
    if (data.errorCode === 1103) {
      await deleteValueFor(StoreKey.accessToken);

      const result = await postRefreshToken();

      if (!result) {
        dispatch(logout()); //<<여기
        errorAlert('로그인 해주세요');
      }

      return config;
    }

    return Promise.reject(err);
  },
);

내 코드, 그냥 store에서 dispatch를 뽑아온 다음 바로 연결된 액션을 발동시키면 된다.

https://stackoverflow.com/questions/52946376/reactjs-axios-interceptors-how-dispatch-a-logout-action