{"id":17901,"library":"redux-flipper","title":"Redux Flipper Middleware","description":"redux-flipper is a Redux middleware designed to integrate Redux state and action debugging directly with the Flipper desktop client. It works in conjunction with the `flipper-plugin-redux-debugger` to visualize Redux store changes in real-time within React Native applications. The current stable version is 2.0.3, which supports Redux v5 and has relaxed peer dependency requirements for `react-native-flipper` and `react-native`. The package generally follows the release cadence of its companion Flipper plugin. Key differentiators include its ability to whitelist or blacklist specific state keys and actions, resolve cyclic references in the state (though with a performance warning), and its straightforward integration process for React Native applications, particularly those using `react-native` >= 0.62.","status":"active","version":"2.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/jk-gan/redux-flipper","tags":["javascript","typescript"],"install":[{"cmd":"npm install redux-flipper","lang":"bash","label":"npm"},{"cmd":"yarn add redux-flipper","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-flipper","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for React Native application integration with Flipper.","package":"react-native","optional":false},{"reason":"Core dependency for Flipper integration in React Native.","package":"react-native-flipper","optional":false},{"reason":"The middleware integrates with Redux stores.","package":"redux","optional":false}],"imports":[{"note":"The `createDebugger` function is the default export of the package.","wrong":"import { createDebugger } from 'redux-flipper';","symbol":"createDebugger","correct":"import createDebugger from 'redux-flipper';"},{"note":"When using CommonJS `require`, the default export is accessed via `.default`. This pattern is typically used inside `if (__DEV__)` blocks.","wrong":"const createDebugger = require('redux-flipper');","symbol":"createDebugger","correct":"const createDebugger = require('redux-flipper').default;"},{"note":"Useful for type-checking the configuration object when using TypeScript.","symbol":"ReduxFlipperConfig","correct":"import type { ReduxFlipperConfig } from 'redux-flipper';"}],"quickstart":{"code":"import { createStore, applyMiddleware } from 'redux';\nimport { configureStore } from '@reduxjs/toolkit';\nimport createDebugger from 'redux-flipper';\n\n// Example Root Reducer (replace with your actual reducer)\nconst RootReducer = (state = { count: 0 }, action) => {\n  switch (action.type) {\n    case 'INCREMENT':\n      return { ...state, count: state.count + 1 };\n    default:\n      return state;\n  }\n};\n\nconst middlewares = [\n  /* other middlewares like redux-thunk or redux-saga */\n];\n\nif (__DEV__) {\n  // Using the ESM import for createDebugger\n  middlewares.push(createDebugger({\n    stateWhitelist: ['user'], // Example: only log 'user' state changes\n    actionsBlacklist: ['SET_THEME'], // Example: ignore 'SET_THEME' actions\n    resolveCyclic: false, // Default is false, enable only if necessary\n  }));\n}\n\n// Standard Redux store setup\nconst store = createStore(RootReducer, applyMiddleware(...middlewares));\n\n// Redux Toolkit store setup example\nconst toolkitStore = configureStore({\n  reducer: RootReducer,\n  middleware: (getDefaultMiddleware) => {\n    const defaultMiddlewares = getDefaultMiddleware();\n    return __DEV__ ? defaultMiddlewares.concat(middlewares) : defaultMiddlewares;\n  },\n});\n\nconsole.log('Redux store initialized. Open Flipper to debug.');\n\n// Example dispatch to see actions in Flipper\nstore.dispatch({ type: 'INCREMENT' });\nstore.dispatch({ type: 'SOME_OTHER_ACTION', payload: 'test' });","lang":"javascript","description":"This code demonstrates how to integrate `redux-flipper` middleware into both a traditional Redux store and a Redux Toolkit store, including common configuration options for state whitelisting/blacklisting and conditional `__DEV__` inclusion."},"warnings":[{"fix":"Update `flipper-plugin-redux-debugger` to version 2.0.0 or later in your Flipper desktop client (`Manage Plugins > Install Plugins`).","message":"Version 2.0.0 was a major release to align with `flipper-plugin-redux-debugger` 2.0.0, fixing connection issues and `undefined` actions. Ensure your `flipper-plugin-redux-debugger` is also updated to v2.0.0 or higher for compatibility.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Avoid cyclic references in your Redux state. If strictly necessary, use `createDebugger({ resolveCyclic: true })` but monitor performance. Prefer `stateWhitelist` to reduce the amount of state being serialized.","message":"Enabling `resolveCyclic: true` to handle cyclic references in your Redux state can significantly impact application performance. It is intended as a temporary debugging solution, and restructuring your Redux state to avoid cyclic references is the recommended long-term approach.","severity":"gotcha","affected_versions":">=1.4.2"},{"fix":"Wrap the `createDebugger()` middleware instantiation and addition to your middleware array within an `if (__DEV__) { ... }` block to ensure it's only active in development builds. Example: `if (__DEV__) { middlewares.push(createDebugger()); }`","message":"The middleware is typically intended for development environments. It's crucial to conditionally apply `redux-flipper` using `if (__DEV__)` to prevent unnecessary overhead and potential exposure of debugging information in production builds.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Refer to the official Flipper documentation for manual setup steps for React Native versions below 0.62: `https://fbflipper.com/docs/getting-started/react-native.html#manual-setup`.","message":"For React Native applications older than version 0.62, Flipper integration requires manual setup steps in the native (iOS/Android) projects. Automatic Flipper support is only enabled by default for `react-native` >= 0.62.","severity":"gotcha","affected_versions":"<0.62"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"1. Ensure `flipper-plugin-redux-debugger` is installed and enabled in your Flipper desktop client via `Manage Plugins > Install Plugins`. 2. Verify your React Native app is connected to Flipper. 3. Check that `redux-flipper` middleware is correctly applied to your Redux store, preferably within an `if (__DEV__)` block.","cause":"The `flipper-plugin-redux-debugger` desktop plugin might not be installed or enabled in Flipper, or there could be a connection issue with your React Native app. The middleware might also not be correctly added to your Redux store, or not activated in a `__DEV__` environment.","error":"Redux Debugger plugin not showing up in Flipper desktop client"},{"fix":"When using CommonJS `require`, ensure you access the default export with `.default`: `const createDebugger = require('redux-flipper').default;`. If using ESM, `import createDebugger from 'redux-flipper';` is the correct syntax.","cause":"This usually happens when `require('redux-flipper')` is used without `.default` to access the default export, or if `redux-flipper` is not correctly installed or resolved by the module system.","error":"TypeError: Cannot read property 'default' of undefined at Object.<anonymous> (App.js:X:Y)"},{"fix":"Either refactor your Redux state to eliminate cyclic references, or enable the `resolveCyclic` option as a temporary measure: `createDebugger({ resolveCyclic: true })`. Be aware of potential performance impacts when enabling `resolveCyclic`. Consider using `stateWhitelist` to only debug specific parts of the state.","cause":"Your Redux state contains objects with circular references, which `redux-flipper` (and JSON serialization in general) cannot handle by default.","error":"TypeError: Cyclic object value"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}