Zustand

https://gyazo.com/d00503cd94a3e8451311655ea52587b7

例

code:ts

import { create } from 'zustand'

type Store = {

count: number

inc: () => void

}

const useStore = create<Store>()((set) => ({

count: 1,

inc: () => set((state) => ({ count: state.count + 1 })),

}))

function Counter() {

const { count, inc } = useStore()

return (

<div>

<span>{count}</span>

<button onClick={inc}>one up</button>

</div>

)

}

状態とそれに関するactionを一緒に定義して、hooks経由で使う

例

code:ts

import { create } from 'zustand'

type State = {

count: number

}

type Actions = {

increment: (qty: number) => void

decrement: (qty: number) => void

}

type Action = {

type: keyof Actions

qty: number

}

const countReducer = (state: State, action: Action) => {

switch (action.type) {

case 'increment':

return { count: state.count + action.qty }

case 'decrement':

return { count: state.count - action.qty }

default:

return state

}

}

const useCountStore = create<State & Actions>((set) => ({

count: 0,

dispatch: (action: Action) => set((state) => countReducer(state, action)),

}))

複数のstoreを使う