Skip to content

Commit adce5e6

Browse files
docs: remove duplicate code sections (#3310)
1 parent 32a3698 commit adce5e6

File tree

1 file changed

+2
-87
lines changed

1 file changed

+2
-87
lines changed

docs/guides/nextjs.md

Lines changed: 2 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -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
7678
import { 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

250165
There are two architectures for a Next.js application: the

0 commit comments

Comments
 (0)