redux-flipper

import { createStore, applyMiddleware } from 'redux'; import { configureStore } from '@reduxjs/toolkit'; import createDebugger from 'redux-flipper'; // Example Root Reducer (replace with your actual reducer) const RootReducer = (state = { count: 0 }, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; default: return state; } }; const middlewares = [ /* other middlewares like redux-thunk or redux-saga */ ]; if (__DEV__) { // Using the ESM import for createDebugger middlewares.push(createDebugger({ stateWhitelist: ['user'], // Example: only log 'user' state changes actionsBlacklist: ['SET_THEME'], // Example: ignore 'SET_THEME' actions resolveCyclic: false, // Default is false, enable only if necessary })); } // Standard Redux store setup const store = createStore(RootReducer, applyMiddleware(...middlewares)); // Redux Toolkit store setup example const toolkitStore = configureStore({ reducer: RootReducer, middleware: (getDefaultMiddleware) => { const defaultMiddlewares = getDefaultMiddleware(); return __DEV__ ? defaultMiddlewares.concat(middlewares) : defaultMiddlewares; }, }); console.log('Redux store initialized. Open Flipper to debug.'); // Example dispatch to see actions in Flipper store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type: 'SOME_OTHER_ACTION', payload: 'test' });