Debugging Redux State in React Native

debugging Redux state in React Native with React Native Debugger and redux-devtools-extension, with or without middleware in the store

tl;dr

• Install React Native Debugger for your system and redux-devtools-extension for your app
• Shake your app (device) and enable Debug JS Remotely from the menu.
• Close all open debugger windows (e.g. the one that opens in the Browser when you enable Remote debugging)
• Open a tab in React Native Debugger with the port your app’s debugger is running on. For Expo DevTools it’s usually 19002. (RND is smart enough to automatically detect the port when you open a new tab..)

Setup Redux DevTools Extension in your app

1npm install -D redux-devtools-extension

If you just have a simple Redux store with no middleware or enhancers, use devToolsEnhancer()

1// store.js
2import { createStore } from 'redux';
3import { devToolsEnhancer } from 'redux-devtools-extension';
4
5const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
6  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
7));

If you have middleware, use composeWithDevTools()

1// store.js
2import { createStore, applyMiddleware } from 'redux';
3import { composeWithDevTools } from 'redux-devtools-extension';
4
5const store = createStore(reducer, composeWithDevTools(
6  applyMiddleware(...middleware),
7  // other store enhancers if any
8));