React Native Zustand Flipper

This plugin allow see actions of zustand on react native.

:warning: Please use zustand v4

Installation

First install zustandstore on Flipper Plugin Manager.

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

1yarn add react-native-flipper-zustand -D

Or npm

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

Usage

1import create from  'zustand';
2import zustandFlipper from 'react-native-flipper-zustand';
3
4const useStore = create(
5	zustandFlipper(set => ({
6	  bears: 0,
7	  // "set" now receives as the third parameter, the name of an action that will be shown in Flipper
8	  increasePopulation: () => set(state => ({ bears: state.bears + 1 }), false, 'increasePopulation'),
9	  removeAllBears: () => set({ bears: 0 }, false, 'removeAllBears')
10	}))
11);

TypeScript

1import create from  'zustand';
2import zustandFlipper from 'react-native-flipper-zustand';
3
4type BearStoreT = {
5	bears: number;
6	increasePopulation: () => void;
7	removeAllBears:  () => void;
8}
9
10const useStore = create<BearStoreT>()(
11	zustandFlipper(set => ({
12	  bears: 0,
13	  // "set" now receives as the third parameter, the name of an action that will be shown in Flipper
14	  increasePopulation: () => set(state => ({ bears: state.bears + 1 }), false, 'increasePopulation'),
15	  removeAllBears: () => set({ bears: 0 }, false, 'removeAllBears')
16	}))
17);