藏经阁

使用Next.js、TypeORM和Shadcn-UI从零搭建现代化SaaS系统（第二部分-状态管理和接口）

168
2024-06-27 18:52
5 个月前

整理架构分析

     首先我们页面应该分为登录前的页面和登录后的页面，登录前的页面是跟用户无关的推广页与一些SEO倒流页，这种页面一般不会做千人千面的展示，所以我们在这不需要得到用户信息。另一种页面是登陆后操作的页面，我们创建好用户之后，进入到我们的工作台，工作台相关的页面还有主要的Sass提供页面是需要登录的，我们先整体设计，我们所有的页面进去都是没有用户信息的，则一开始都是没有登录状态，然后进到页面之后，我们请求前端接口，如果有cookie或者localstorage里面存有token，我们则需要请求用户信息接口，如果获取得到用户信息，则表示用户登录成功，首页的login按钮则会变成跳转到工作台的按钮。

分析系统的状态管理

   从上面的描述我们可以得出我们的appStore会有这些接口需要设计，是否登录和用户信息，这个也是贯穿整个系统的，接下来我们就想使用什么框架做状态管理了。React相关的状态管理有什么库，有Redux,Redux-Toolkit,Mbox,Recoil,Zustand,我对比了一圈之后，发现比较喜欢用Zustand,因为这个库比较灵活，也可以不依赖React使用，相当于可以在入口初始化的时候先预取接口信息，设置应用状态，这个特别在Admin之类的应用特别好用。可以把逻辑封装到Zustand里面。那我们后面就会使用Zustand做整个应用的数据管理。

分析接口如何方便调用（tRPC+React Query）

   因为我们在Nextjs中使用Server Conpoment里面运行服务端的代码，意味着我们开启了Node服务,我们可以在Next的App Api Router里面写一些服务端的逻辑，但是经过我的实验，发现在那里写接口没问题，但是接口调用的是接口地址，调用的时候没有类型提示，这个就会变成很有意思了，要不我们在启动一个后端的项目，我一般会用NestJs写，然后再写一个type包利用declare namespace把接口信息统一管理，这样就不需要在各个系统引入，因为这个文章我们直接使用NextJs编写，我发现用tRPC这个写的时候会挺省心，直接返回了类型提示，并且还用上了ReactQuery,那我们的请求库和接口编写就用tRPC这个库来编写。

编码实现整个过程

引入Zustand做为状态管理

我们在src目录创建stores目录，这里存放所有的Zustand管理的状态。在这个目录我们首先创建一个appStpre.ts

cd client/src
mkdir stores

## 添加依赖包
pnpm add zustand immer
// client/src/stores/appStore.ts
import { createStore } from 'zustand/vanilla';
import { produce } from 'immer';
export type AppState = {
    userProfile: {
        email: string;
        nickName:string
    };
    isLogin: boolean | undefined;
};

export type AppActions = {
    setLogin: (login: boolean) => void;
    setUserProfile: (login: boolean | undefined, userInfo?: Partial<AppState['userProfile']>) => void;
};

export type AppStore = AppState & AppActions;
// 初始化状态，默认isLoing都是undefined，这个等我们客户端接口返回之后才去设置他是true或者false
export const initAppStore = (): AppState => {
    return {
        userProfile: {
            email: '',
            nickName:""
        },
        isLogin: undefined
    };
};

export const defaultInitState: AppState = {
    isLogin: undefined,
    userProfile: {
        email: '',
        nickName:""
    }
};

export const createAppStore = (initState: AppState = defaultInitState) => {
    return createStore<AppStore>()(set => {
        return {
            ...initState,
            setLogin: login => {
                set(
                    produce((draft: AppState) => {
                        draft.isLogin = login;
                    })
                );
            },
            setUserProfile: (login, userInfo = {}) => {
                console.log('setUserProfile', login, userInfo);
                set(
                    produce((draft: AppState) => {
                        draft.userProfile = {
                            ...initAppStore().userProfile,
                            ...userInfo
                        };

                        draft.isLogin = login;
                    })
                );
            }
        };
    });
};

添加Provider引入Zustand

// src/components/providers/appStoreProvider.tsx
'use client';

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

import { type AppStore, createAppStore, initAppStore } from '@/stores/appStore';

export type AppStoreApi = ReturnType<typeof createAppStore>;

export const AppStoreContext = createContext<AppStoreApi | undefined>(undefined);

export interface AppStoreProviderProps {
    children: ReactNode;
}

export const AppStoreProvider = ({ children }: AppStoreProviderProps) => {
    // 只会初始化一次
    const storeRef = useRef<AppStoreApi>();
    if (!storeRef.current) {
        storeRef.current = createAppStore(initAppStore());
    }
    return <AppStoreContext.Provider value={storeRef.current}>{children}</AppStoreContext.Provider>;
};

export const useAppStore = <T,>(selector: (store: AppStore) => T): T => {
    const appStoreContext = useContext(AppStoreContext);
    if (!appStoreContext) {
        throw new Error(`useAppStore只能在AppStoreProvider运行`);
    }
    return useStore(appStoreContext, selector);
};

 Layout 代码引入Provider

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import {AppStoreProvider} from "@/components/providers/appStoreProvider";

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

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

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

至此我们引入了Zustand在Nextjs了，下面我们开始改造大工程了，我们需要引入trpc来完成接口改造 了

引入tRPC改造接口

# 添加依赖包
pnpm add @trpc/client@next @trpc/react-query@next @trpc/server@next @trpc/next@next @tanstack/react-query@latest zod

创建tTPC路由器 

// client/src/trpc/trpc.ts
import { initTRPC } from '@trpc/server';



const t = initTRPC.create();

export const router = t.router;
export const publicProcedure = t.procedure;

添加tRPC测试接口 

import { publicProcedure, router } from './trpc';


export const appRouter = router({
    hello:publicProcedure.query(()=>{
        return 'hello sass Start'
    })
});

export type AppRouter = typeof appRouter;

添加tRPC的客户端 

import { AppRouter } from 'client/src/trpc';
import { createTRPCReact } from '@trpc/react-query';

export const trpc = createTRPCReact<AppRouter>();

添加tRPC的provider并在Layout引入

// client/src/components/provoders/trpcQueryProvider.tsx
'use client';
import { PropsWithChildren, useState } from 'react';
import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { trpc } from '@/app/_trpc/index';
import { httpBatchLink, httpLink } from '@trpc/client';
import { absoluteUrl } from '@/lib/utils';
function makeQueryClient() {
    return new QueryClient({
        defaultOptions: {
            queries: {
                // With SSR, we usually want to set some default staleTime
                // above 0 to avoid refetching immediately on the client
                staleTime: 60 * 1000
            }
        }
    });
}

let browserQueryClient: QueryClient | undefined = undefined;

function getQueryClient() {
    if (isServer) {
        // Server: always make a new query client
        return makeQueryClient();
    } else {
        // Browser: make a new query client if we don't already have one
        // This is very important, so we don't re-make a new client if React
        // suspends during the initial render. This may not be needed if we
        // have a suspense boundary BELOW the creation of the query client
        if (!browserQueryClient) browserQueryClient = makeQueryClient();
        return browserQueryClient;
    }
}

export const TRPCQueryProviders = ({ children }: PropsWithChildren) => {
    const queryClient = getQueryClient();
    const [trpcClient] = useState(() =>
        trpc.createClient({
            links: [
                httpBatchLink({
                    url: absoluteUrl('/api/trpc'),
                    headers: () => {
                        const token = isServer ? '' : localStorage.getItem('accessToken') || '';
                        return {
                            authorization: token != '' ? `Bearer ${token}` : token
                        } as any;
                    }
                })
            ]
        })
    );
    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient as any}>
            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </trpc.Provider>
    );
};

 接下来我们需要添加trpc的api路由

//client/src/app/api/trpc/[trpc]/route.ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from '@/trpc';

const handler = (req: Request) =>
    fetchRequestHandler({
        endpoint: '/api/trpc',
        req,
        router: appRouter,
        createContext: () => ({})
    });

export { handler as GET, handler as POST };

修改layout引入这个provider 

// client/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import {AppStoreProvider} from "@/components/providers/appStoreProvider";
import {TRPCQueryProviders} from "@/components/providers/trpcQueryProvider";

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

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next api",
};

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

至此我们的trpc也引入成功，这个教程就先到引入trpc吧，后面章节我们会加入邮箱验证登录，redis和整个仓库源码。

结语

这一个部分我先分析了一下如何做状态管理以及为什么需要引入trpc做为我们的接口。后面结束的章节我会使用nodemailer发送邮件验证做为注册登录，使用redis做验证码等功能，大家先有所期待吧