easyTree / react-native-flipper-zustand

Show zustand state on flipper

React Native Zustand Flipper

This plugin allow see actions of zustand on react native.

⚠️ Please use zustand v4

Installation

First install zustandstore on Flipper Plugin Manager.

Next, install react-native-flipper-zustand package on your React Native project.

yarn add react-native-flipper-zustand -D

Or npm

npm i react-native-flipper-zustand --save-dev

Usage

import create from  'zustand';
import zustandFlipper from 'react-native-flipper-zustand';

const useStore = create(
	zustandFlipper(set => ({
	  bears: 0,
	  // "set" now receives as the third parameter, the name of an action that will be shown in Flipper
	  increasePopulation: () => set(state => ({ bears: state.bears + 1 }), false, 'increasePopulation'),
	  removeAllBears: () => set({ bears: 0 }, false, 'removeAllBears')
	}))
);

TypeScript

import create from  'zustand';
import zustandFlipper from 'react-native-flipper-zustand';

type BearStoreT = {
	bears: number;
	increasePopulation: () => void;
	removeAllBears:  () => void;
}

const useStore = create<BearStoreT>()(
	zustandFlipper(set => ({
	  bears: 0,
	  // "set" now receives as the third parameter, the name of an action that will be shown in Flipper
	  increasePopulation: () => set(state => ({ bears: state.bears + 1 }), false, 'increasePopulation'),
	  removeAllBears: () => set({ bears: 0 }, false, 'removeAllBears')
	}))
);