Slices pattern with Nextjs app router #2412

alexander-densley · 2024-03-14T20:23:24Z

alexander-densley
Mar 14, 2024

With nextjs app router, its important to have providers, and in the docs it shows how to create a provider for one store, can someone give me some advice on applying the slices pattern to all this? as it stands i have created multuple providers and wrap my app in all of them

YenHub · 2024-07-10T15:06:03Z

YenHub
Jul 10, 2024

Hey @alexander-densley

Working with Slices in NextJS is not too dissimilar from the normal Store setup.

There are just a couple of tweaks you need to make to break your store down into slices and consume them from a Provider.

The example below largely mimics the suggested approach in the Zustand Docs, albeit; using Slices.

Here is some example boiler-plate to help get you going:

Tree Structure (NextJS 14)

src/
├── app/
│   ├── layout.tsx
│   └── page.tsx
└── lib/
    ├── components/
    │   └── StoreTest/
    │       └── index.tsx
    ├── providers/
    │   └── app-store-provider.tsx
    └── store/
        ├── slices/
        │   └── appSlice.ts
        ├── defaultState.ts
        └── index.ts

Files

/src/app/layout.tsx

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';

import { AppStoreProvider } from '@/lib/providers/app-store-provider';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Zustand Store Slices Demo',
  description: 'A demonstration of using Slices in NextJS 14 ',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppStoreProvider>{children}</AppStoreProvider>
      </body>
    </html>
  );
}

/src/app/page.tsx

import { StoreTest } from '@/lib/components/StoreTest';

export default function Home() {
  return (
    <main>
      <StoreTest />
    </main>
  );
}

/src/lib/components/StoreTest/index.tsx

'use client';

import { useStore } from '@/lib/providers/app-store-provider';

export const StoreTest: React.FC = () => {
  const { isLoading, setIsLoading } = useStore(state => ({
    isLoading: state.isLoading,
    setIsLoading: state.setIsLoading,
  }));

  return (
    <form action="javascript:void(0);">
      <label htmlFor="storeval">Current Value:</label>
      <br />
      <input
        disabled
        id="storeval"
        name="storeval"
        type="text"
        value={String(isLoading)}
      />
      <br />
      <input
        type="button"
        value="Set Is Loading"
        onClick={() => setIsLoading(!isLoading)}
      />
    </form>
  );
};

/src/lib/providers/app-store-provider.tsx

'use client';

import { createContext, type ReactNode, useContext, useRef } from 'react';
import { type StoreApi, useStore as useZustandStore } from 'zustand';

import { createAppStore, initStore, Store } from '@/lib/store';

export const AppStoreContext = createContext<StoreApi<Store> | null>(null);

export interface AppStoreProviderProps {
  children: ReactNode;
}

export const AppStoreProvider = ({ children }: AppStoreProviderProps) => {
  const storeRef = useRef<StoreApi<Store>>();
  if (!storeRef.current) storeRef.current = createAppStore(initStore());

  return (
    <AppStoreContext.Provider value={storeRef.current}>
      {children}
    </AppStoreContext.Provider>
  );
};

export const useStore = <T,>(selector: (store: Store) => T): T => {
  const appStoreContext = useContext(AppStoreContext);

  if (!appStoreContext) {
    throw new Error('useStore must be use within AppStoreProvider');
  }

  return useZustandStore(appStoreContext, selector);
};

/src/lib/store/slices/appSlice.ts

import { StateCreator } from 'zustand';

import { Store } from '@/lib/store';

export interface AppState {
  isLoading: boolean;
}

export type AppActions = {
  setIsLoading(isLoading: AppState['isLoading']): void;
  resetAppState(): void;
};

export type AppSlice = AppState & AppActions;

export const initialAppState: AppState = {
  isLoading: false,
};

export const createAppSlice: StateCreator<Store, [], [], AppSlice> = set => ({
  ...initialAppState,
  setIsLoading: isLoading => set({ isLoading }),
  resetAppState: () => set(initialAppState),
});

/src/lib/store/defaultState.ts

import { AppState, initialAppState } from './slices/appSlice';

export type StoreState = AppState;

export const defaultState: AppState = {
  ...initialAppState,
};

/src/lib/store/index.ts

import { createStore } from 'zustand/vanilla';

import { defaultState } from './defaultState';
import { AppSlice, AppState, createAppSlice } from './slices/appSlice';

export type Store = AppSlice;

export const initStore = (): AppState => {
  return defaultState;
};

export const createAppStore = (initState: AppState = defaultState) => {
  return createStore<Store>()((set, get, store) => ({
    ...initState,
    ...createAppSlice(set, get, store),
  }));
};

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Slices pattern with Nextjs app router #2412

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Slices pattern with Nextjs app router #2412

alexander-densley Mar 14, 2024

Replies: 1 comment

YenHub Jul 10, 2024

Tree Structure (NextJS 14)

Files

alexander-densley
Mar 14, 2024

YenHub
Jul 10, 2024