I have no idea where to integrate the Reactotron.createEnhancer()

[BigPun86]

Hey there!

i am trying to configure reactotron-redux with my redux store and i cant get it run!!! No idea what i am doing wrong, but i haven't seen any examples where to add the Reactotron.createEnhancer() when i am using redux-devtools-extension & redux-logger. Is this even possible?

Any ideas where i add Reactotron.createEnhancer()?

ReactrotronConfig.js

import { reactotronRedux } from 'reactotron-redux';
import { isEmulator } from 'react-native-device-info';
import Reactotron from 'reactotron-react-native';

const name = `unmute App ${isEmulator() ? 'Emulator' : 'Real Device'}`;
const host = isEmulator() ? '127.0.0.1' : 'localhost';
const configOptions = { name, host };

const reactotron = Reactotron.configure(configOptions)
  .use(reactotronRedux())
  .useReactNative()
  .connect();

// clear log on start
Reactotron.clear();

export default reactotron;

store.js

import { AsyncStorage } from 'react-native';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import { composeWithDevTools } from 'redux-devtools-extension';

import { persistStore, persistReducer } from 'redux-persist';

import Reactotron from "../../ReactotronConfig"

import rootReducer from './reducers/index';


const middleware = [thunk];
let composed = applyMiddleware(...middleware);
if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger());
  composed = composeWithDevTools(applyMiddleware(...middleware));
}

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: ['authState'],
  blacklist: ['counterState']
};

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer, composed);
const persistor = persistStore(store);

export { store, persistor };

If i push Reactotron.createEnhancer() to the middleware then i always get an error

"TypeError: e.apply is not a function....."

middleware.push(Reactotron.createEnhancer())

Environment:

    "react-native": "0.61.4",
    "react-redux": "7.1.1",
    "reactotron-react-native": "4.0.2",
    "reactotron-redux": "3.1.2",
    "redux": "4.0.4",
    "redux-devtools-extension": "2.13.8",
    "redux-logger": "3.0.6",
    "redux-persist": "6.0.0",
    "redux-thunk": "2.3.0"

[BigPun86]

Okay got it! Found this issue which helped me => https://github.com/infinitered/reactotron/issues/1031

I ended up using compose from redux:

const middleware = [thunk];
let composed = applyMiddleware(...middleware);
const createdEnhancer = Reactotron.createEnhancer();

if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger());
  composed = compose(
    composeWithDevTools(applyMiddleware(...middleware)),
    createdEnhancer
  );
}

// Middleware: Redux Persist Config
const persistConfig = {
  key: 'root',
  storage: AsyncStorage, // Storage Method (React Native)
  whitelist: ['authState'], // Whitelist (Save Specific Reducers)
  blacklist: ['counterState'] // Blacklist (Don't Save Specific Reducers)
};

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer, composed);
const persistor = persistStore(store);

[Karniej]

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import analyticsMiddleware from './redux/middleware/analyticsMiddleware';
import errorTrackingMiddleware from './redux/middleware/errorTrackingMiddleware';
import crashReporterMiddleware from './redux/middleware/crashReporterMiddleware';
import reducers from './redux/reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
declare const window: {
  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any;
};

const middleware = [thunk, analyticsMiddleware, errorTrackingMiddleware, crashReporterMiddleware];
let composed = applyMiddleware(...middleware);

const createdEnhancer = Reactotron.createEnhancer();

if (__DEV__) {
  composed = compose(
    composeWithDevTools(applyMiddleware(...middleware)),
    createdEnhancer,
  );
}

const store = createStore(
  reducers,
  composed,
);

export default store;

Please could somebody tell me what I got wronghere ? my tests are failing with

    TypeError: b.apply is not a function

      24 | }
      25 | 
    > 26 | const store = createStore(
         |               ^
      27 |   reducers,
      28 |   composed,
      29 | );``` message.

[tarikfp]

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import analyticsMiddleware from './redux/middleware/analyticsMiddleware';
import errorTrackingMiddleware from './redux/middleware/errorTrackingMiddleware';
import crashReporterMiddleware from './redux/middleware/crashReporterMiddleware';
import reducers from './redux/reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
declare const window: {
  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any;
};

const middleware = [thunk, analyticsMiddleware, errorTrackingMiddleware, crashReporterMiddleware];
let composed = applyMiddleware(...middleware);

const createdEnhancer = Reactotron.createEnhancer();

if (__DEV__) {
  composed = compose(
    composeWithDevTools(applyMiddleware(...middleware)),
    createdEnhancer,
  );
}

const store = createStore(
  reducers,
  composed,
);

export default store;

Please could somebody tell me what I got wronghere ? my tests are failing with

    TypeError: b.apply is not a function

      24 | }
      25 | 
    > 26 | const store = createStore(
         |               ^
      27 |   reducers,
      28 |   composed,
      29 | );``` message.

Facing the same problem. Using Reactotron.createEnhancer() fails when testing with jest. Any workaround?