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 { poseWithDevTools } from 'remote-redux-devtools'
import thunk from 'redux-thunk'
/* some other imports */

const poseEnhancers = poseWithDevTools({ realtime: true, port: 8000 })
export default createStore(rootReducer, poseEnhancers(
  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?

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 { poseWithDevTools } from 'remote-redux-devtools'
import thunk from 'redux-thunk'
/* some other imports */

const poseEnhancers = poseWithDevTools({ realtime: true, port: 8000 })
export default createStore(rootReducer, poseEnhancers(
  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./zalmoxisus/remote-redux-devtools

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

• javascript
• ios
• macos
• reactjs
• react-native

4 Answers 4

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 = bineReducers({
  ui: uiReducer
});

let poseEnhancers = pose;

if (__DEV__) {
    poseEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || pose;
}

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

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

import { createStore, bineReducers, applyMiddleware, pose } 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,

Add redux devtools extension to your createStore

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

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

I got the same problem where i thought the react native debugger is working fine, E.g. 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

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