Zustand Flipper

Zustand debugger for Flipper. It can log actions and show inside Flipper using flipper-plugin-zustand-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

Get Started

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

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

2. Add the middleware into your zustand store:

import {create} from 'zustand';
import zustandFlipper from 'zustand-flipper';

const useBearStore = create(
    zustandFlipper(
        set => ({
          bears: 0,
          increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
          removeAllBears: () => set({ bears: 0 }),
        }),
        'BearStore',
    ),
);

3. Install flipper-plugin-zustand-debugger in Flipper desktop client:

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

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