React-Router 和 Redux的简单使用

React-Router v6

1. 安装React-Router npm i react-router-dom
2. 创建路由规则

// router/index.tsx
import { createBrowserRouter, Navigate } from "react-router-dom";
import ILayout from "../layout/ILayout";
import Home from "../pages/home/Home";
import Page404 from "../pages/404/Page404";

// 使用历史记录模式
// 他还提供了 'createMemoryRouter' 和 'createHashRouter' 模式
const browserRouter = createBrowserRouter([
  // 根路由
  {
    path: "/",
    element: <ILayout></ILayout>,
    // 子路由
    children: [
      // 重定向到 '/home'
      {
        path: "/",
        element: <Navigate to={"/home"} replace></Navigate>,
      },
      {
        path: "home",
        element: <Home></Home>,
      },
    ],
  },
  // 没有匹配的路由时自定义404页面
  {
    path: "*",
    element: <Page404></Page404>,
  },
]);

export default browserRouter;

3. 使用路由

// main.tsx
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { RouterProvider } from "react-router-dom";
import browserRouter from "./router/index.tsx";

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
  <App>
    <RouterProvider router={browserRouter}></RouterProvider>
  </App>
);

4. 子路由出口

import { Layout, Menu } from "antd";
import { Content, Header } from "antd/es/layout/layout";
import Sider from "antd/es/layout/Sider";
import { Outlet } from "react-router-dom";

function ILayout() {

  return (
    <Layout>
      <Sider>
        Sider
      </Sider>
      <Layout>
        <Header>
          Header
        </Header>
        <Content>
          {/* 出口组件 */}
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
  );
}

export default ILayout;

Redux

Redux是一个用于管理全局状态的容器，类似于vuex或pinia

1. 安装redux npm install @reduxjs/toolkit react-redux
2. 创建store

// store/index.ts
import { configureStore } from "@reduxjs/toolkit";
import userInfoReducer from "./modules/userInfoSlice";

const store = configureStore({
  reducer: {
    userInfoReducer,
  },
});
export default store;
// 类型推断
// 导出定义的Reducer类型
export type RootState = ReturnType<typeof store.getState>;

export type AppDispatch = typeof store.dispatch;

3. 创建一个Slice

// store/modules/userInfoSlice.ts
import { createSlice } from "@reduxjs/toolkit";

export const userInfoSlice = createSlice({
  name: "userInfo",
  // 初始化状态
  initialState: {
    userInfo: {
      account: 123456,
      nickname: "orange",
    },
  },

  reducers: {
    // 更新userInfo
    updateUserInfo: (state, action) => {
      state.userInfo = {
        ...state.userInfo,
        ...action.payload,
      };
    },
  },
});

export const { updateUserInfo } = userInfoSlice.actions;

export default userInfoSlice.reducer;

4. 重写hooks

// hooks.ts
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "./store";

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

5. 使用他们

// pages/home/Home.tsx
import { useAppDispatch, useAppSelector } from "../../hooks";
import { updateUserInfo } from "../../store/modules/userInfoSlice";

function Home() {
  const userInfo = useAppSelector((state) => state.userInfoReducer.userInfo);
  const dispatch = useAppDispatch();
  return (
    <div
      onClick={() => {
        dispatch(updateUserInfo({ account: 100000 }));
      }}
    >
      {JSON.stringify(userInfo)}
    </div>
  );
}

export default Home;