2

I am working on a React Native app, but for some reasons I have the redux devtools not able to detect the store.

Here is the code for store.js

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';

import jobs from './reducers/jobs';
import { watcherSaga } from './sagas';

// Saga Middleware
const sagaMiddleware = createSagaMiddleware();
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = createStore(jobs, composeEnhancer(applyMiddleware(sagaMiddleware)));

sagaMiddleware.run(watcherSaga);
// Enable Hot Module for the reducers
/* eslint-disable global-require */

if (module.hot) {
  //   module.hot.accept('./reducers/index', () => {
  //     store.replaceReducers(require('./reducers').default);
  //   });
}

export default store;

When I open the chrome debugger-ui I get "No store found" in the redux tab.

I already gave access to files url from the extension settings. I have no idea what can be the problem. I tried several store settings with middleware and redux-tools, found on tutorial, but none of them seems to work. I tried also the standalone app but it does not detect anything, neither the react code. What am I doing wrong?

Kaiser Soze
  • 1,362
  • 3
  • 14
  • 31
  • 1
    What do you have in `jobs`? Is it a `combineReducers({...reducers })` object? – Hristo Eftimov Mar 06 '19 at 10:17
  • I created a index file for the reducers: const rootReducer = combineReducers({ jobs, other }); but if you look at the code, you see I am trying to load directly the jobs reducer. – Kaiser Soze Mar 06 '19 at 10:26
  • 1
    Nope, you need to pass the `rootReducer` as the first parameter to `createStore`, not only the `jobs` – Hristo Eftimov Mar 06 '19 at 10:40
  • It is even more weird, when I start the app and chrome opens "window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__" exists as well as "__REDUX_DEVTOOLS_EXTENSION__" but they are undefined when I console log in the store.js so basically the store is loaded before the extension is loaded in chrome? Might be that ? – Kaiser Soze Mar 06 '19 at 10:41
  • I did it, and it's not working either. see my latest comment. thanks! – Kaiser Soze Mar 06 '19 at 10:41
  • 1
    I am not sure but I think that there is a problem between `window` of the browser and when you try to load it through your application. Try step 1.3 from the documentation https://github.com/zalmoxisus/redux-devtools-extension. `import { composeWithDevTools } from 'redux-devtools-extension';` instead of `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__` – Hristo Eftimov Mar 06 '19 at 10:46
  • I am using Expo maybe this is the issue, but I cannot find a solution, so frustrating xD. THank you so much for the help :D – Kaiser Soze Mar 06 '19 at 11:04

1 Answers1

2

I found the solution and I share it so will help others. The main problem is that I am using expo, so expo runs on a different port than the normal devtools. Instead of using chrome I downloaded the standalone debugger and then, thanks to this article, I opened the debugger with the correct port, this did the magic: 

rndebugger://set-debugger-loc?host=localhost&port=19001
Kaiser Soze
  • 1,362
  • 3
  • 14
  • 31