Repository files navigation

Redux middleware forFlipper. It can log redux actions and show inside Flipper usingflipper-plugin-redux-debugger.

• React Native
  • Forreact-native >= 0.62, flipper support is enabled by default
  • Forreact-native < 0.62, followthese steps to setup your app
• Redux or Redux-Toolkit

1. Installredux-flipper middleware andreact-native-flipper in your React Native app:

yarn add redux-flipper react-native-flipper# for iOScd ios&& pod install

2. Add the middleware into your redux store:

import{createStore,applyMiddleware}from'redux';constmiddlewares=[/* other middlewares */];if(__DEV__){constcreateDebugger=require('redux-flipper').default;middlewares.push(createDebugger());}conststore=createStore(RootReducer,applyMiddleware(...middlewares));

Redux Toolkit

constmiddlewares=[/* other middlewares */];if(__DEV__){constcreateDebugger=require('redux-flipper').default;middlewares.push(createDebugger());}conststore=configureStore({reducer:{},middleware:(getDefaultMiddleware)=>getDefaultMiddleware().concat(middleware),});

3. Installflipper-plugin-redux-debugger in Flipper desktop client:

Manage Plugins > Install Plugins > search "redux-debugger" > Install

4. Start your app, then you should be able to see Redux Debugger on your Flipper app

Many times you are only interested in certain part of the Redux state when debugging. You can pass array of string which have to match to the root key of the Redux state.

For example if Redux schema is something like this and you are only interested in user then you can whitelist only that part of the state

typeReduxState={todos:string[];notifications:string[];user:{name:string;};};

letreduxDebugger=createDebugger({stateWhitelist:['user']});

If you app has very big state tree it is also good idea to whitelist certain keys from Redux state otherwise Flipper can be very slow.

Redux Debugger does not support cyclic reference objects by default as resolving it makes application slow. This feature can be enabled by passing{ resolveCyclic: true } intocreateDebugger.

This is just a temporary solution if debugging is urgent. It is advisable to restructure your redux state structure.

For more information about cyclic reference, visitMDN Cyclic Object.

letreduxDebugger=createDebugger({resolveCyclic:true});

You may specify an actions blacklist the same way as with React Native Debugger, by providing anarray of strings to match against the action.type field.This feature can be enabled by passing{ actionsBlacklist } intocreateDebugger,whereactionsBlacklist is an array of strings.

For example:

constactionsBlacklist=['EVENTS/','LOCAL/setClock'];constreduxDebugger=createDebugger({ actionsBlacklist});

This will exclude any actions that contain the substrings in the blacklist. So an action with typeEVENTS/foo will not be sent to the redux debugger flipper plugin, but an action with typeLOCAL/anotherAction will.