{"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.","language":"javascript","status":"active","last_verified":"Thu Apr 23","install":{"commands":["npm install redux-flipper"],"cli":null},"imports":["import createDebugger from 'redux-flipper';","const createDebugger = require('redux-flipper').default;","import type { ReduxFlipperConfig } from 'redux-flipper';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}