# umi-2207

**Repository Path**: connerljlx_admin/umi-2207

## Basic Information

- **Project Name**: umi-2207
- **Description**: 2207班umi的基础
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-04-04
- **Last Updated**: 2023-04-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 启动umi
```js
// 需要提前创建 项目文件夹。在 该文件夹 目录下 打开cmd
npx create-umi@latest
```
# 项目目录分析
```js
config
  config.js // 项目配置文件 和 .umirc.js二选一
src
  .umi // 不要动 umi运行时生成的临时文件目录，比如入口文件、路由等，都会被临时生成到这里。
  assets // 存储开发的静态资源目录
  layouts // 相当于vue中的app.vue或者 react中的app.js 跟组件
  pages // 路由组件目录
  components
.umirc.ts // 项目配置文件 和 config/config.js 二选一
```

# umi路由
## 约定式 
除配置式路由外，Umi 也支持约定式路由。约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。
```js
pages
  index.tsx
  news.tsx
// 自动生成如下路由

[
  { path: '/', component: '@/pages/index' },
  { path: '/news', component: '@/pages/news' },
]

pages
  index.tsx
  news
    index.tsx
// 自动生成如下路由

[
  { path: '/', component: '@/pages/index' },
  { path: '/news', component: '@/pages/news/index' },
]


pages
  index.tsx
  news
    index.tsx
    a.tsx
// 自动生成如下路由

[
  { path: '/', component: '@/pages/index' },
  { path: '/news', component: '@/pages/news/index' },
  { path: '/news/a', component: '@/pages/news/a' }
]

// 动态路由

 pages/
  + foo/
    - $slug.tsx
  + $bar/
    - $.tsx
  - index.tsx

  [
    { path: '/', component: '@/pages/index.tsx' },
    { path: '/foo/:slug', component: '@/pages/foo/$slug.tsx' },
    { path: '/:bar/*', component: '@/pages/$bar/$.tsx' },
  ];
```

## 配置型路由
```js
 defineConfig({
  outputPath: 'dist',
  routes: [
  {
    path: '/', // 路由重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: 'home' // 相对路径 自动从 pages目录开始 
  },
  {
    path: '/news',
    routes: [  // 定义子路由 子路由 一定要携带 一级路由path作为前缀，省略自动 加前缀
      {
        path: 'native', // 省略时 path不能加 /
        component: 'news/native'
      },
      {
        path: 'abroad',
        component: 'news/abroad'
      }
    ],
    component: 'news'
  },
  {
    path: '/about',
    component: '@/pages/about' // 也可以使用路径别名 @从src开始
  },
  {
    path: '*', // 404的路由
    component: 'notFound'
  }
]
});
```

## 路由的wrappers
配置路由的包装组件
原理：
  利用高阶组件，劫持 路由组件， 配置了 路由组件 wrappers，先渲染 wrappers 里面的包装组件，
  包装组件 内部可以决定是否 渲染 该路由组件
使用场景：
  用来 做鉴权


# umi生成器 
## 使用 dva 
react常用状态管理插件
redux @reduxjs/toolkit
mobx
dva 基于 redux 封装 （更类似于vuex）

## dva基础使用
+ 使用生成器生成dva
```js
umi g dva 
```
### reducer基础使用
```js
export default {
  // 命名空间
  namespace: 'count',
  // 存储状态
  state: {
    num: 0,
    cates: []
  },
  // reducer 修改状态 一定返回新的状态
  reducers: {
    // 第二个参数 参数就是 提交 action {type:'xxx', data: xxx}
    add(state, {data}) {
      state.num += data;
      return {
        ...state
      }
    },
  },
}; 
```
+ 组件中 获取 state 和提交 action 触发 对应 reducer 
 - 获取 useSelector
 ```js
    const num = useSelector((state => state.count.num));
 ```
 - 提交 action
 ```js
    const dispatch = useDispatch();

    dispatch({
      type: 'count/add',
      data: 5
    })
 ```

### 异步处理
```js
import { getCates } from '@/api'
export default {
  // 命名空间
  namespace: 'count',
  // 存储状态
  state: {
    cates: []
  },
  // reducer 修改状态 一定返回新的状态
  reducers: {
   initCates (state, action) {
      state.cates = action.data;
      return {
        ...state
      }
    }
  },
  // 处理异步
  effects: {
    /* 
      call 调用异步请求 call(函数, 参数)
      put dispatch 普通的action的 initCates 注意这里 action type无需加 key
    */
    *fetchCates(_action: any, { call, put }: any) {      
      const res = yield call(getCates, _action.params);
      if (res.data.code === 0) {
        // 请求成功 dispatch 普通 reducer 修改状态
        yield put({ type: 'initCates',data: res.data.data });
      }
    },
  },
}; 
```
+ 组件中提交 异步的action
```js
dispatch({
  type: 'count/fetchCates',
  params: {
    page: 1,
    pageSize: 10
  }
})
```