설치

npm i zustand or yarn add zustand

Store 생성

import { create } from 'zustand'

const numStore = create(set => ({
  num: 0,
  plusNum: () => set(state => ({ num: state.num + 1 })),
  resetNum: () => set({ num: 0 })
}))

export default numStore

Store 사용

import { Button, Text, View } from 'react-native'
import React from 'react';
import numStore from './Store.js';

const ProfileScreen = () => {
  const { num, plusNum, resetNum } = numStore(state => state)

  return (
    <View>
      <Text> {num} </Text>
      <Button title=' + 1 ' onPress={plusNum}/>
      <Button title='RESET' onPress={resetNum}/>
    </View>
  )
}

export default ProfileScreen

---

Devtools 설치

Redux Devtools를 이용한 디버깅 편리화
1. Redux Devtools 설치
2. 스토어에 devtools 연결

import { create } from 'zustand'
import { devtools } from 'zustand/middleware'

const store = create(set => ({
  num: 0,
  plusNum: () => set(state => ({ num: state.num + 1 })),
  resetNum: () => set({ num: 0 })
}))

const numStore= create(devtools(store))

export default numStore

Devtools 환경에 따른 변화

개발환경일때만 보이게 하고 / 배포 시에는 보이지 않게 처리하는 방법

const numStore= create(
  process.env.NODE_ENV !== 'production' ? devtools(store) : store
)