React Native Debugger state undefined

Question

I am trying to use the remote React Native Debugger for my project. I have installed React-Native-Debugger on my Mac with $ brew update && brew cask install react-native-debugger . Then I added Remote-redux-devtools package with npm install --save-dev remote-redux-devtools

My createStore code looks like this atm.

import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'remote-redux-devtools'
import thunk from 'redux-thunk'
/* some other imports */

const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 })
export default createStore(rootReducer, composeEnhancers(
  applyMiddleware(thunk.withExtraArgument(api), logger, firebaseSave)
))

Console output works just fine, but it is not picking up on the actions or redux state. Am I missing a step? Why isn't it picking up redux?

https://github.com/zalmoxisus/remote-redux-devtools

https://github.com/jhen0409/react-native-debugger

Answer 1

Here's the solution I used in order to make the redux states visible on the react-native-debugger: Let's suppose That I have a redux reducer called uiReducer :

const rootReducer = combineReducers({
  ui: uiReducer
});

let composeEnhancers = compose;

if (__DEV__) {
    composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}

const store = createStore(rootReducer, composeEnhancers(applyMiddleware(ReduxThunk)));

Please don't forget to import your reducer, and also the following imports from redux, react-redux and redux-thunk :

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import ReduxThunk from 'redux-thunk';

Now, your state if visible in the debugger :

I hope it's helpful ! Thanks,

Answer 2

Add redux devtools extension to your createStore

export default createStore(rootReducer, composeEnhancers(
  applyMiddleware(thunk.withExtraArgument(api), logger, firebaseSave)
),window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

For more informations : https://github.com/zalmoxisus/redux-devtools-extension

Answer 3

I got the same problem where i thought the react native debugger is working fine, Eg react native debugger's mapper is working fine, it is pulling out my project file/directory at the source. Console output is working fine.

But i don't see any redux being picking up.

After some trials and errors, i found out i have to turn the JS Dev Mode on my android emulator.

Steps: Ctrl + M -> Dev Setting -> Check JS Dev Mode -> Reload

Answer 4

I noticed that along with this, I couldn't see my sources in Developer tools which lead me to realise that I need to do this

On the IOS Simulator

Cmd + D > Debug JS Remotely worked for me