ACTION is `undefined` | Integration Reactotron Redux and Redux Toolkit (createAsyncThunk)

[abdullahizzuddiin]

Hello,

I am developing an app using Redux Toolkit. Then, I integrate it with Reactotron Redux.

But, it seems Reactotron didn't recognized action that defined on createAsyncThunk. But, it recognized action that defined as standard reducer.

This is my ReactotronConfig.js

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

import AsyncStorage from '@react-native-async-storage/async-storage';

let reactotron;
if(__DEV__) {
    reactotron = Reactotron
        .setAsyncStorageHandler(AsyncStorage)
        .configure({
            name: 'AppName',
        })
        .useReactNative() // add all built-in react native plugins
        .use(reactotronRedux())
        .connect(); // let's connect!
}

export default reactotron;

and this is my Store Configuration.

import {ReactotronConfig} from '@utils'

const store = configureStore({
    reducer: rootReducer,
    enhancers: defaultEnhancers => [ReactotronConfig.createEnhancer(), ...defaultEnhancers]
});

Any clue about this problem?

[anderpo]

@abdullahizzuddiin Have you found a solution?

[abdullahizzuddiin]

Not yet @anderpo

[Armandocgg]

import {ReactotronConfig} from '@utils'

const store = configureStore({
    reducer: rootReducer,
    enhancers: [ReactotronConfig.createEnhancer()]
});

I implement it this way. works.

[luongnguyenpoeta]

import {ReactotronConfig} from '@utils'

const store = configureStore({
    reducer: rootReducer,
    enhancers: [ReactotronConfig.createEnhancer()]
});

I implement it this way. works.

It works for me too. You saved my day

[luccaroli]

import {ReactotronConfig} from '@utils'

const store = configureStore({
    reducer: rootReducer,
    enhancers: [ReactotronConfig.createEnhancer()]
});

I implement it this way. works.

It's worked for me, tks

[villoal]

My Reactotron config

import Reactotron from 'reactotron-react-native'
import { reactotronRedux } from 'reactotron-redux'
import AsyncStorage from '@react-native-async-storage/async-storage'

const reactotron = Reactotron
  .setAsyncStorageHandler(AsyncStorage) // AsyncStorage would either come from `react-native` or `@react-native-community/async-storage` depending on where you get it from
  .configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .use(reactotronRedux)
  .connect() // let's connect!

export default reactotron

My store.js

import { configureStore } from '@reduxjs/toolkit'
import locationReducer from './slices/locationSlice'
import { Reactotron } from '../../ReactotronConfig'

export const store = configureStore({
  reducer: {
    location: locationReducer
  },
  enhancers: [Reactotron.createEnhancer()]
})

The errors I get:

I don't know what may be the problem, could be the reducer not being the rootReducer.

[villoal]

Okey, solved it. It was this import on store.js as I was exporting the whole function import Reactotron from '../../ReactotronConfig'

And this function on Reactotron config .use(reactotronRedux())

Hope it helps someone who is struggling with this too :)

[blwinters]

My store file uses TypeScript and apparently Reactotron.createEnhancer can be undefined, so I had to go this route:

const enhancers: StoreEnhancer[] = []
if (Reactotron.createEnhancer) {
  enhancers.push(Reactotron.createEnhancer())
}

export const store = configureStore({
  reducer: {
    [authSlice.name]: authSlice.reducer,
  },
  middleware: getDefaultMiddleware => getDefaultMiddleware(),
  enhancers,
})