2019-06-20

React Native with Redux

redux를 react native에 처음 사용해본다. 대체로 react에서의 사용과 크게 다르지 않음.

최상위 App컴포넌트를 <Provider>로 감싸는 것도 똑같다.

// index.js
...
const store = configureStore();
// configureStores()는 createStore()의 리턴값을 내어준다.
// 다만 인자로 넘길 reducer와 enhancer 관련 설정을 포함해 따로 뺀 것임

const ReduxApp = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

AppRegistry.registerComponent(appName, () => ReduxApp);

• (참고) middleware는 enhancer의 한 종류. compose()로 여러개의 enhancer를 쓸 수 있다.

• react-native-debugger

  — redux 디버깅, RN 디버깅 모두 가능하다. — 스타일을 실시간으로 수정해볼 수 있다! — 기본 remote debugger가 크롬 개발자도구를 사용해서 생기는 공간 낭비도 줄여준다.

  다만 Redux를 연동하기 위해서는 코드 수정이 필요하다.

  // src/store/configureStore.js
  ...
  let composeEnhancers = compose;
  if (__DEV__){
  composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  }
  ...
  const configureStore = () => {
  return createStore(rootReducer, composeEnhancers());
  };

  npm 모듈 설치로 해결할 수도 있다. 공식문서를 보면 integration 관련 내용이 있으니 참고하자. (mobx나 apollo 통합도 언급돼있다)