infinitered / reactotron

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
https://docs.infinite.red/reactotron/
MIT License
14.95k stars 947 forks source link

Missing type `createEnhancer` when using with typescript #1222

Closed raulmax319 closed 10 months ago

raulmax319 commented 3 years ago

When using redux with reactotron i get the following problem message when using with typescript. Property 'createEnhancer' does not exist on type 'Reactotron<ReactotronReactNative> & ReactotronReactNative'.ts(2339)

Here what my code looks like:

createStore.ts

import { createStore, applyMiddleware, Store, compose } from 'redux';
import thunk from 'redux-thunk';

import { ReactotronInstance as Reactotron } from '~/services/reactotron';
import rootReducer from './rootReducer';

const enhancer = __DEV__
  ? compose(Reactotron.createEnhancer(), applyMiddleware(thunk))
  : applyMiddleware(thunk);

export const store: Store = createStore(rootReducer, enhancer);

reactotron.ts

import Tron from 'reactotron-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {
  ReactotronConfig,
  DEFAULT_REACTOTRON_CONFIG,
} from './reactotronConfig';
import { RootNavigation } from '~/navigator';
import { clear } from '~/utils/storage';

declare global {
  interface Console {
    tron: typeof Tron;
  }
}

let ReactotronInstance: typeof Tron;
const config: ReactotronConfig = DEFAULT_REACTOTRON_CONFIG;

if (__DEV__) {
  const Reactotron = require('reactotron-react-native').default;

  const { reactotronRedux } = require('reactotron-redux');

  ReactotronInstance = Reactotron.setAsyncStorageHandler(AsyncStorage)
    .configure({
      name: config.name || require('../../../package.json').name,
    })
    .useReactNative({
      asyncStorage: config.useAsyncStorage ? undefined : false,
    })
    .use(reactotronRedux())
    .connect();
}

ReactotronInstance.clear();

console.tron = ReactotronInstance;

export { ReactotronInstance };
yaser-elbatal commented 2 years ago

any solution here ?

NgocLe1001 commented 2 years ago
image

I catch this error? Any solution please. thanh you

thadk commented 2 years ago

Similar but not identical resolved issue of using with Redux Tookit https://stackoverflow.com/questions/73358881/how-we-configure-reactotron-with-reduxjs-tookkit

With Redux Toolkit + typescript, in store.ts, I successfully used the exclamation point to ignore the missing type:

export const store = configureStore({
    reducer: {
        c: cReducer,
        auth: authReducer,
    },
    enhancers: [
        Reactotron.createEnhancer!(),
    ],
})
vdr-mm-quan commented 1 year ago
Screenshot 2023-08-07 at 11 29 13

@thadk Hi, thanks for your answer, I'm facing another issue with jest test. Is anyone facing the same issue? Thank you guys!

MarcosSarges commented 1 year ago
Screenshot 2023-08-07 at 11 29 13

@thadk Hi, thanks for your answer, I'm facing another issue with jest test. Is anyone facing the same issue? Thank you guys!

woker me


const enhancers = Reactotron?.createEnhancer
  ? composeEnhancers(applyMiddleware(...middlewares), Reactotron.createEnhancer())
  : composeEnhancers(applyMiddleware(...middlewares));

const store = createStore(persistedReducer, enhancers);
phuocantd commented 10 months ago

try [(Reactotron as any).createEnhancer()] it work for me

umairm1alik commented 6 months ago

Wokring for me enhancers: getDefaultEnhancers => getDefaultEnhancers().concat(Reactotron.createEnhancer()),