{children}
; +}; diff --git a/templates/template-react-zustand/src/hooks/use-counter.ts b/templates/template-react-zustand/src/hooks/use-counter.ts new file mode 100644 index 0000000..6cbe5d2 --- /dev/null +++ b/templates/template-react-zustand/src/hooks/use-counter.ts @@ -0,0 +1,29 @@ +import { Dispatch, SetStateAction, useState } from "react"; + +interface IReturnType { + count: number; + increment: () => void; + decrement: () => void; + reset: () => void; + setCount: Dispatch
+
+ );
+};
diff --git a/templates/template-react-zustand/src/pages/demo/use-store.ts b/templates/template-react-zustand/src/pages/demo/use-store.ts
new file mode 100644
index 0000000..e679b77
--- /dev/null
+++ b/templates/template-react-zustand/src/pages/demo/use-store.ts
@@ -0,0 +1,45 @@
+import { useRequest } from "ahooks";
+import { useNavigate } from "react-router-dom";
+
+import useCounter from "@/hooks/use-counter";
+import { isLoginState, userState } from "@/models";
+import { getUserApi } from "@/services/api/api";
+
+export const useStore = () => {
+ const navigate = useNavigate();
+
+ const { count, increment } = useCounter(0);
+
+ const { isLogin } = isLoginState();
+
+ const { user, login, logout } = userState();
+
+ const getUserRequest = useRequest(getUserApi, {
+ manual: true,
+ onSuccess: (result) => {
+ login({
+ id: result.id,
+ username: result.name,
+ });
+ },
+ onError: (error) => {
+ console.warn(error.message);
+ },
+ });
+
+ const onBack = () => navigate("/");
+
+ const onLogin = () => getUserRequest.run(1);
+
+ const onLogout = () => logout();
+
+ return {
+ user,
+ count,
+ onBack,
+ onLogin,
+ isLogin,
+ onLogout,
+ increment,
+ };
+};
diff --git a/templates/template-react-zustand/src/pages/welcome/welcome.module.less b/templates/template-react-zustand/src/pages/welcome/welcome.module.less
new file mode 100644
index 0000000..ae94977
--- /dev/null
+++ b/templates/template-react-zustand/src/pages/welcome/welcome.module.less
@@ -0,0 +1,34 @@
+.appLogo {
+ height: 40vmin;
+ pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .appLogo {
+ animation: App-logo-spin infinite 20s linear;
+ }
+}
+
+.appHeader {
+ background-color: #ffffff;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ font-size: 12px;
+ color: black;
+}
+
+.appLink {
+ color: black;
+}
+
+@keyframes App-logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/templates/template-react-zustand/src/pages/welcome/welcome.tsx b/templates/template-react-zustand/src/pages/welcome/welcome.tsx
new file mode 100644
index 0000000..af2302c
--- /dev/null
+++ b/templates/template-react-zustand/src/pages/welcome/welcome.tsx
@@ -0,0 +1,48 @@
+import { FC } from "react";
+import { useNavigate } from "react-router-dom";
+
+import logo from "@/assets/logo.svg";
+import { Header } from "@/components/header/header";
+
+import styles from "./welcome.module.less";
+
+export const Welcome: FC = () => {
+ const navigate = useNavigate();
+
+ const onContinue = () => navigate("/demo");
+
+ return (
+
+ {user && My name is {user.username} }
+
+ {!isLogin && (
+
+ + +
+ )} + + {isLogin && ( ++ +
+ )} + ++ +
+ ++ +
+
+
+ 
+ 🚀 Vite + React Boilerplate
+
+
+ );
+};
diff --git a/templates/template-react-zustand/src/routes/index.tsx b/templates/template-react-zustand/src/routes/index.tsx
new file mode 100644
index 0000000..8b9bc2d
--- /dev/null
+++ b/templates/template-react-zustand/src/routes/index.tsx
@@ -0,0 +1,13 @@
+import { Route, Routes } from "react-router-dom";
+
+import { Demo } from "@/pages/demo/demo";
+import { Welcome } from "@/pages/welcome/welcome";
+
+export const Router = () => {
+ return (
+ + +
++ + Learn React + + {" | "} + + Vite Docs + +
+