@@ -71,6 +71,8 @@ request.
7171
7272> ** Note:** do not forget to remove all comments from your ` tsconfig.json ` file.
7373
74+ ### Initializing the store
75+
7476``` ts
7577// src/stores/counter-store.ts
7678import { createStore } from ' zustand/vanilla'
@@ -158,93 +160,6 @@ export const useCounterStore = <T,>(
158160> there are stateful client components located above this component in the tree, or if this component
159161> also contains other mutable state that causes a re-render.
160162
161- ### Initializing the store
162-
163- ``` ts
164- // src/stores/counter-store.ts
165- import { createStore } from ' zustand/vanilla'
166-
167- export type CounterState = {
168- count: number
169- }
170-
171- export type CounterActions = {
172- decrementCount: () => void
173- incrementCount: () => void
174- }
175-
176- export type CounterStore = CounterState & CounterActions
177-
178- export const initCounterStore = (): CounterState => {
179- return { count: new Date ().getFullYear () }
180- }
181-
182- export const defaultInitState: CounterState = {
183- count: 0 ,
184- }
185-
186- export const createCounterStore = (
187- initState : CounterState = defaultInitState ,
188- ) => {
189- return createStore <CounterStore >()((set ) => ({
190- ... initState ,
191- decrementCount : () => set ((state ) => ({ count: state .count - 1 })),
192- incrementCount : () => set ((state ) => ({ count: state .count + 1 })),
193- }))
194- }
195- ```
196-
197- ``` tsx
198- // src/providers/counter-store-provider.tsx
199- ' use client'
200-
201- import { type ReactNode , createContext , useRef , useContext } from ' react'
202- import { useStore } from ' zustand'
203-
204- import {
205- type CounterStore ,
206- createCounterStore ,
207- initCounterStore ,
208- } from ' @/stores/counter-store'
209-
210- export type CounterStoreApi = ReturnType <typeof createCounterStore >
211-
212- export const CounterStoreContext = createContext <CounterStoreApi | undefined >(
213- undefined ,
214- )
215-
216- export interface CounterStoreProviderProps {
217- children: ReactNode
218- }
219-
220- export const CounterStoreProvider = ({
221- children ,
222- }: CounterStoreProviderProps ) => {
223- const storeRef = useRef <CounterStoreApi | null >(null )
224- if (storeRef .current === null ) {
225- storeRef .current = createCounterStore (initCounterStore ())
226- }
227-
228- return (
229- <CounterStoreContext.Provider value = { storeRef .current } >
230- { children }
231- </CounterStoreContext.Provider >
232- )
233- }
234-
235- export const useCounterStore = <T ,>(
236- selector : (store : CounterStore ) => T ,
237- ): T => {
238- const counterStoreContext = useContext (CounterStoreContext )
239-
240- if (! counterStoreContext ) {
241- throw new Error (` useCounterStore must be used within CounterStoreProvider ` )
242- }
243-
244- return useStore (counterStoreContext , selector )
245- }
246- ```
247-
248163### Using the store with different architectures
249164
250165There are two architectures for a Next.js application: the
0 commit comments