react 项目搭建+route+Redux Toolkit 简易使用

1.创建项目

create-react-app admin-react     //create-react-app 项目名

2.route路由使用

下载route路由

npm i react-router-dom

在index入口文件中用BrowserRouter包裹app

import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

创建routes表文件

在app.js中使用 routes表

进入Layout文件

NavLink：跳转路由；Outlet：子页面容器

3.简易外壳搭好，往子页面填充内容

4.Redux Toolkit使用

添加 Redux Toolkit 和 React-Redux 依赖包到你的项目中：

npm install @reduxjs/toolkit react-redux

新建redux文件夹

module ：存放各种模块
store：从 Redux Toolkit 引入 configureStore API。我们从创建一个空的 Redux store 开始，并且导出它

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {}
})

创建 store 后，便可以在 React 组件中使用它。 在 src/index.js 中引入我们刚刚创建的 store , 通过 React-Redux 的 将 包裹起来,并将 store 作为 prop 传入。

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

worktable：根据自己的需求创建的模块数据储存，方便管理
在该文件中从 Redux Toolkit 引入 createSlice API。
需要一个字符串名称来标识切片、一个初始 state 以及一个或多个定义了该如何更新 state 的 reducer 函数。模块创建后 ，我们可以导出 模块中生成的 Redux action creators 和 reducer 函数。

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: state => {
      // Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
      // 并不是真正的改变状态值，因为它使用了 Immer 库
      // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
      // 不可变的状态
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})
// 每个 case reducer 函数会生成对应的 Action creators
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

下一步，我们需要从计数切片中引入 reducer 函数，并将它添加到我们的 store 中。通过在 reducer 参数中定义一个字段，我们告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新

import { configureStore } from "@reduxjs/toolkit";
import worktableReducer from "./module/worktable";

export default configureStore({
  reducer: {
    counter: worktableReducer
  }
});

在组件中使用redux状态和操作
现在我们可以使用 React-Redux 钩子让 React 组件与 Redux store 交互。我们可以使用 useSelector 从 store 中读取数据，使用 useDispatch dispatch actions。

Redux Toolkit使用完成啦