redux flipper configuration for redux toolkit

store.js

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import { RootReducer } from '../reducers';

const middlewares = getDefaultMiddleware({
  // https://github.com/reduxjs/redux-toolkit/issues/415
  immutableCheck: false,
});

if (__DEV__) {
  const createDebugger = require("redux-flipper").default;
  middlewares.push(createDebugger());
}

const store = configureStore({
  reducer: RootReducer,
  middleware: middlewares,
})

export default store;

Hello, the newer version the redux toolkit depecreated the getDefaultMiddleware, so now how can we configure the flipper and toolkit?

@vagnerwentz i found solution here for your question and it works: https://stackoverflow.com/questions/69538539/redux-debugger-plugin-in-flipper-is-unavailable

@SusulAdam I will try this.

Edit: It didn't work the same "warning" appeared. Do I need to change some thing at native files?

The native module for Flipper seems unavailable. Please verify that `react-native-flipper` is installed as yarn dependency to your project and, for iOS, that `pod install` is run in the `ios` directory.
at node_modules/react-native-flipper/index.js:158:4 in printNoFlipperWarning
at node_modules/react-native-flipper/index.js:129:25 in addPlugin
at node_modules/redux-flipper/lib/index.js:38:8 in <anonymous>
at node_modules/redux/lib/redux.js:670:18 in <anonymous>
at node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:547:11 in configureStore
at src/store/store.ts:12:16 in configureCustomStore
at src/store/store.ts:27:45 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at App.tsx:20:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at index.js:3:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:349:11 in loadModuleImplementation
at node_modules/metro-runtime/src/polyfills/require.js:201:44 in guardedLoadModule
at http://192.168.3.5:19000/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:205280:3 in global code

Any solution? Above suggestion didn't worked for me.

Don't use getDefaultMiddleware, and everything should work.
don't forget to do cd ios && pod install

const middleware:any = [
  /* other middlewares */
];

if (__DEV__) {
  const createDebugger = require("redux-flipper").default;
  middleware.push(createDebugger());
}

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

const createDebugger = require('redux-flipper').default; // <-- ADD THIS


const configureCustomStore = () => {
    const rootReducer = combineReducers({
        // ... YOUR REDUCERS
    });


    const store = configureStore({
        reducer: rootReducer,
        middleware: (getDefaultMiddleware) =>
            getDefaultMiddleware()
                .concat(createDebugger()), // <-- ADD THIS
    });

    return {store};
};

export const {store} = configureCustomStore();