use redux-devtools-extension with react-native with chrome

Question

Need help in setup Redux devTools for react-native I have very simple reducer and createStore here, and I try to incorporate redux-devtools-extension, so I can debug my react-native app, but I got "store no found" in Redux tab

import { createStore, applyMiddleware} from 'redux'
import {reducer} from "./reducers"
import { composeWithDevTools, devToolsEnhancer } from 'redux-devtools- 
extension'

let store = createStore(reducer, devToolsEnhancer());

export const reducer = (state=[], action) => {
switch(action.type) {
    case "ADD_MEMBER":                   
        return [...state, {categoryID: 0, name: "Bill", zip: "27733", id: 4}]         
    default:
        return state
}
return state;
}

Answer 1

Redux DevTools Extension cannot access the React Native worker, as extensions cannot inject code into web workers. You have to use remote-redux-devtools to communicate with the extension via websockets.

You'll have just to replace

import { devToolsEnhancer } from 'redux-devtools-extension'

with

import devToolsEnhancer from 'remote-redux-devtools';

Then from the extension context menu, click on "Open Remote DevTools". By default it'll use its remote server for quick bootstrapping, but it's recommended to run your local server by installing and running remotedev-server. It's similar to how you have to install and run react-devtools package for React Native.

Answer 2

Another option is to use React Native Debugger.

The win is, you don't have to npm install redux devtools every time. The debugger provides you the good old "REDUX_DEVTOOLS_EXTENSION" out of the box.

So, if you are reusing code from web, you do not need any code changes. The same set up as redux devtools extension will just work.

For a thorough guide on how to setup React Native Debugger with an Expo app look here. (As the official docs are a bit confusing.)