/
💻

[React Native] React Native Debugger를 이용하여 Redux 디버깅 하기

React Native
On this page
  • ❐ React Native Debugger Tool 설치
  • ❐ 앱에 라이브러리 연동
  • ❐ Redux 디버깅하는 방법

❐ React Native Debugger Tool 설치

react-native-debugger를 설치합니다.

brew update && brew cask install react-native-debugger

React Native Debugger가 설치되었습니다. react native debugger1





❐ 앱에 라이브러리 연동

Package 설치

redux-devtools-extension package를 설치합니다.

yarn add redux-devtools-extension

소스 수정

App.js 파일 작성

미들웨어를 composeWithDevTools() 함수로 감싸줍니다.

javascript
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux'
import rootReducer, {rootSaga} from './src/redux/modules/rootReducer';
import penderMiddleware from 'redux-pender';
import createSagaMiddleware from 'redux-saga';
import {createLogger} from 'redux-logger';
import { composeWithDevTools } from 'redux-devtools-extension';
import { default as HomeScreen } from "./src/screen/HomeScreen";
import { default as ReduxSagaScreen } from "./src/screen/redux/ReduxSagaScreen";
...생략
enableScreens();
const Stack = createStackNavigator();
function App() {
//SagaMiddleware를 생성합니다.
const sagaMiddleware = createSagaMiddleware();
//logger를 생성합니다.
const logger = createLogger();
//creactStore() 함수를 이용하여 Store를 생성합니다.
//rootReducer를 첫번째 파라미터로 전달하며, Middleware를 두번째 파라미터로 전달합니다.
const store = createStore(
rootReducer,
composeWithDevTools(
applyMiddleware(penderMiddleware(), sagaMiddleware, logger),
),
);
//rootSaga를 실행해줍니다.
sagaMiddleware.run(rootSaga);
//Provider 컴포넌트는 컴포넌트들이 Redux의 Store에 접근 가능하도록 해주는 컴포넌트입니다.
//컴포넌트의 Root 위치에 Provider 컴포넌트로 감싸줍니다.
return (
<Provider store={store}>
<NavigationContainer>
<Stack.Navigator initialRouteName="HomeScreen">
<Stack.Screen name="ReduxSagaScreen" component={ReduxSagaScreen} />
...생략
</Stack.Navigator>
</NavigationContainer>
</Provider>
);
}
export default App;




❐ Redux 디버깅하는 방법

1) App과 React Native Debug Tool을 실행합니다.

2) 디버깅 모드를 실행합니다.
- Android : ⌘+M을 눌러 개발 메뉴를 열고, Debug를 선택합니다.
- iOS : ⌘+D을 눌러 개발 메뉴를 열고, Debug with Chrome를 선택합니다. react native debugger2

3) 액션을 디스패치합니다.
디스패치한 액션명, 이전 상태와 이후 상태값 등을 확인할 수 있습니다. react native debugger3



SoDevly의 개발 블로그