React Native 에서 Redux 디버깅하기 (redux-flipper)

Flipper는 meta에서 관리하는 React Native 디버깅 툴이다.

Flipper는 다양한 플러그인을 제공하는데, 이를 통해서 redux 디버깅을 할 수 있다.

 

우선, Flipper를 설치한다.

https://fbflipper.com/

Extensible mobile app debugger | Flipper

Flipper의 설치 후, settings에서 ios와 android의 developer 설정을 해준다.

그리고 Setup Doctor를 확인하여 Flipper를 사용할 수 있도록 설정해준다.

모든 설정이 끝나면, 무사히 시뮬레이터와 플리퍼가 연결된 것을 확인할 수 있을 것이다.

 

이제, 플리퍼의 Plugin Manager를 열고 flipper-plugin-redux-debugger를 설치해준다.

아직 이 플러그인이 Unavaliable plugins인 것을 볼 수 있는데, 리액트 네이티브에서 설정이 필요하다.

 

npm i redux-flipper react-native-flipper

위와 같이 라이브러리를 설치해주고, 다음과 같이 설정을 해준다.

// store.ts
import {configureStore} from '@reduxjs/toolkit';
import rootReducer from './reducer';

const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware => {
    if (__DEV__) {
      const createDebugger = require('redux-flipper').default;
      return getDefaultMiddleware().concat(createDebugger());
    }
    return getDefaultMiddleware();
  },
});
export default store;

이제 플리퍼에서 Redux Debugger는 Disabled된 플러그인이 되고, + 버튼을 눌러 활성화할 수 있다.

https://www.npmjs.com/package/redux-flipper

redux-flipper