Bug when running redux-debugger on Flipper

[Isaacmeedinaa]

I receive an Uncaught Error when running redux-debugger plugin for my RN app.

Screen shot of the error: https://imgur.com/O6I1Fcr

Block of code causing error: https://imgur.com/pC3TpcU

I am adding redux-debugger using RN version 0.67.3, Redux Toolkit version 1.8.0, React Redux version 7.2.6, and React Native Flipper version 0.137.0.

[plwai]

May I know the way you add the createDebugger part to RTK middleware?

[Isaacmeedinaa]

@plwai Yessir.

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counter-slice";

const createDebugger = require("redux-flipper").default;

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(createDebugger),
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

I then export store and use it with React Redux provider:

const App: React.FC = () => {
  return (
    <Provider store={store}>
      <SafeAreaView style={styles.safeAreaView}>
        <StatusBar barStyle="default" />
        <View style={styles.container}>
          <Text>Hello World! Working with Redux-Toolkit</Text>
        </View>
      </SafeAreaView>
    </Provider>
  );
};

[Isaacmeedinaa]

Also, I wanted to mention that when adding redux-flipper as a middleware, it does not update the state of the counter state. I tested it with other middlewares like redux-logger and it updates the counter state accurately.

[plwai]

@plwai Yessir.

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counter-slice";

const createDebugger = require("redux-flipper").default;

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(createDebugger),
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

I then export store and use it with React Redux provider:

const App: React.FC = () => {
  return (
    <Provider store={store}>
      <SafeAreaView style={styles.safeAreaView}>
        <StatusBar barStyle="default" />
        <View style={styles.container}>
          <Text>Hello World! Working with Redux-Toolkit</Text>
        </View>
      </SafeAreaView>
    </Provider>
  );
};

Hi @Isaacmeedinaa, it should be createDebugger() instead of createDebugger. This function do flipper connection initialization and return a function for middleware.

Also, I wanted to mention that when adding redux-flipper as a middleware, it does not update the state of the counter state. I tested it with other middlewares like redux-logger and it updates the counter state accurately.

Due to the operation fails in middleware, the action will be discarded by redux.

[Isaacmeedinaa]

Oh wow, yes. That makes total sense. It works now. Thank you!