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

Kieu Hua picture Kieu Hua · Aug 31, 2018 · Viewed 12.2k times · Source

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

Zalmoxisus picture Zalmoxisus · Dec 11, 2018

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.