React 컴포넌트 외부에서 Redux 스토어에 접근하는 가장 좋은 방법

React 컴포넌트 외부에서 Redux 스토어에 접근하는 가장 좋은 방법은 무엇인가요?

React 애플리케이션에서 Redux를 사용할 때는 컴포넌트 내부에서 @connect 데코레이터를 사용하여 스토어에 접근하는 것이 간단합니다. 그렇지만 API 모듈이나 유틸리티 함수와 같은 코드의 다른 부분에서 Redux 스토어에 접근해야할 경우에는 어떻게 해야 할까요? 이 글에서는 React 컴포넌트 외부에서 Redux 스토어에 접근하는 다양한 방법과 최적의 방법에 대해 알아보겠습니다.

옵션 1: 모듈에서 스토어 내보내기

React 컴포넌트 외부에서 Redux 스토어에 접근하려면, 스토어 객체를 createStore 함수를 사용하여 생성한 모듈에서 내보낼 수 있습니다:

import { createStore } from 'redux';

const store = createStore(myReducer);
export default store;

이제 API 모듈이나 유틸리티 함수에서 스토어를 가져와 필요한 대로 사용할 수 있습니다:

import store from './store';

// 스토어 상태에 접근하기
const currentState = store.getState();

// 액션 디스패치하기
store.dispatch(someAction());

이 접근 방식을 통해 어플리케이션 내 어디서든 Redux 스토어에 접근할 수 있으며, 동시에 이를 만들고 글로벌 윈도우 공간을 오염시키지 않도록 할 수 있습니다.

옵션 2: 스토어 업데이트 구독하기

React 컴포넌트 외부에서 Redux 스토어의 변경 사항을 듣기 위해, store.subscribe 메서드를 사용하여 스토어 업데이트를 구독할 수 있습니다. 다음은 사용 예시입니다:

import store from './store';

function listener() {
  // 여기서 스토어 업데이트 처리하기
  const currentState = store.getState();
  console.log('스토어 업데이트:', currentState);
}

store.subscribe(listener);

스토어를 구독함으로써, 스토어 상태가 변경될 때마다 코드를 실행할 수 있습니다. 예를 들어 Redux 스토어에 인증 토큰이 변경될 때마다 Axios 인스턴스를 새로운 인증 토큰으로 업데이트하려는 경우에 유용합니다.

옵션 3: 미들웨어 사용하기

다른 접근 방식으로는 미들웨어를 사용하여 Redux 스토어 상태에 따라 Axios 기본 설정을 수정하는 것입니다. 다음은 사용 예시입니다:

// storeAuthMiddleware.js

import store from './store';

function storeAuthMiddleware() {
  return ({ getState }) => next => (action) => {
    const { auth: { tokens: { authorization_token } } } = getState();

    // 새로운 토큰으로 Axios 헤더 업데이트하기
    axios.defaults.headers.common['Authorization'] = authorization_token;

    return next(action);
  };
}

export default storeAuthMiddleware;

이 예시에서는 Redux 스토어 상태에서 인증 토큰을 가져와 Axios 헤더를 업데이트하는 사용자 정의 미들웨어를 생성합니다. 그런 다음, 스토어를 생성할 때 이 미들웨어를 적용할 수 있습니다:

// store.js

import { createStore, applyMiddleware } from 'redux';
import storeAuthMiddleware from './storeAuthMiddleware';

const store = createStore(reducer, applyMiddleware(storeAuthMiddleware));

이 접근 방식은 유연성을 제공하며, 필요한 경우 다른 미들웨어를 쉽게 통합할 수 있도록 합니다.

결론

React 컴포넌트 외부에서 Redux 스토어에 접근할 때는 여러 가지 접근 방식이 있습니다. 모듈에서 스토어 객체를 내보내고 필요한 곳에서 가져오거나, 스토어 업데이트를 구독하여 변경 사항을 듣거나, 미들웨어를 사용하여 스토어 상태를 기반으로 외부 종속성을 수정할 수 있습니다. 애플리케이션의 아키텍처와 요구 사항에 가장 적합한 접근 방식을 선택하세요.

React 컴포넌트 외부에서 Redux 스토어에 효과적으로 접근함으로써, 다른 애플리케이션 부분과 매끄럽게 통합되는 전역 상태 관리 시스템을 구축할 수 있습니다.

참고 자료 : 

reactjs