ThienMD / use-reducer-flipper

use reducer logger for Flipper

UseReducer Flipper

UseReducer Logger for Flipper. It can log useReducer actions and show inside Flipper using flipper-plugin-redux-debugger .

Support

• React Native
  • For react-native >= 0.62, flipper support is enabled by default
  • For react-native < 0.62, follow these steps to setup your app
• UseReducer

Get Started

1. Install useReducer-flipper and react-native-flipper in your React Native app:

yarn add use-reducer-flipper react-native-flipper
# for iOS
cd ios && pod install

2. Add the logger into your useReducer store:

import flipperLogger from 'use-reducer-flipper';

export const StateProvider = ({ children }) => {
  const [value, dispatch] = useReducer(__DEV__ ? flipperLogger(reducers) : reducers, initialState);

  return <StateContext.Provider value={[value, dispatch]}>{children}</StateContext.Provider>;
};

3. Install flipper-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