React-native-debugger: Redux Does Not Connect

[Clete2]

React Native Debugger version: 0.7.6
React Native version: 0.47.2
Platform: iOS 10.3
Is real device of platform: No; simulator
Operating System: macOS Sierra

Using "remote-redux-devtools": "^0.5.12"

Store is created as such:

import reducers from '../reducers/index';
import { composeWithDevTools } from 'remote-redux-devtools';
import { createStore, applyMiddleware } from 'redux';
...
const store = createStore(reducers, composeWithDevTools(applyMiddleware(thunk)));

If I use VSCode Redux Devtools it works:

However React Native Debugger looks like this:

(Yes even when VSCode is totally closed)

You can see the last line in the log is showing that it's connected to remotedev-server as part of devTools.js which is part of remote-redux-devtools from what I can tell.

What can be done to troubleshoot?

[jhen0409]

Please read documentation. (Redux DevTools Integration)

I guess you have same misunderstanding with https://github.com/jhen0409/react-native-debugger/issues/29.

[Clete2]

@jhen0409 Thank you so much! I had read the documentation but I didn't understand the difference between remote-redux-devtools and redux-devtools-extension -- I figured they worked the same since their wrapper method was the same name. Big mistake!

For anyone else who may run into this issue:
yarn remove remote-redux-devtools; yarn add redux-devtools-extension

In createStore (no change from above):
const store = createStore(reducers, composeWithDevTools(applyMiddleware(thunk)));

But the import (by the same name) now comes from redux-devtools-extension:
import { composeWithDevTools } from 'redux-devtools-extension';

P.S. @jhen0409 Thanks so much for your hard work on this project. It's immensely helpful to us!

[BinaryMuse]

Just popping in to say that I also had the same misunderstanding as #29 (and this), @Clete2's comment was exactly what I needed. Thanks to you both ❤️

[dolsem]

My goal was to make it possible to debug my app with both VSCode and React Native Debugger. In case someone is looking for the same thing, here's how I managed to do it:

const composeWithDevTools = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  || require('remote-redux-devtools').composeWithDevTools;
composeEnhancers = composeWithDevTools({
  serialize: {
    options: {
      symbol: true,
    },
  },
});

[thebarefootdev]

import { createStore, applyMiddleware  } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import placeReducer from './placeReducer';

const store = createStore(
    placeReducer,
    composeWithDevTools(applyMiddleware(thunk)));
export default store

Yet when debugging react-native remote debugger, devtools redux extension says no store found, app works fine.

I have my provider with App as such (there is no outside access to wrap the App Element when using expo and react-native, e.g. index.ts)

  <Provider store={store}>
        <View style={styles.container}>
          <PlaceDetail />
          <PlaceForm />
        </View>
      </Provider>

Then PlaceForm is connected:

export default connect(mapStateToProps, mapDispatchToProps)(PlaceForm);

Yet no store found