react native component 외부에서 redux state 접근하기

리액트 네이티브 component 외부에서 redux state에 접근할 경우 다음과 같이 store를 이용하면 된다.

나의 경우 restapi 호출전 accessToken을 axios header에 설정해줘야 했다.

 

먼저 store 를 생성

import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

 

그리고 store에 저장되어 있는 redux state를 가져올땐 아래와 같이 하면 된다.

import store from './store';

export function doSomething() {
  const state = store.getState();

  const authToken = state.auth.accessToken;

  return fetch('/api/users', {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${authToken}`
    }
  }).then(res => res.json());
}

 

처음에 react native invalid hook call 오류가 지속적으로 나왔던 이유는

리액트 네이티브 콤포넌트 외부에서 useSelector를 쓰려고 시도 했기 때문이다.

생각해보면 리액트 네이티브 콤포넌트가 아닌 곳에서 리액트 관련 함수가 동작하지 않는게 상식적이다.