使用 umi + dva 搭建 react 项目

时间:2021-6-12 作者:qvyue

起步

首先通过 umi 快速创建项目

mkdir myapp && cd myapp
yarn create @umijs/umi-app
yarn

启动项目

yarn start

路由

  1. 通过配置文件配置路由
    直接在.umirc.ts 的 routes 中配置路由
export default {
  routes: [
    { exact: true, path: '/', component: 'index' },
    { exact: true, path: '/user', component: 'user' },
  ],
}
  1. 如果 .umirc.ts 里没有 routes 那么文件系统即路由,通过目录和文件及其命名分析出路由配置

  2. 动态路由
    约定 [] 包裹的文件或文件夹为动态路由。

使用 umi + dva 搭建 react 项目

比如上面的目录最后会被动态编译成 /test/:id 路由,所以我们通过 props.match.params 拿到的就是 id

使用 umi + dva 搭建 react 项目
  1. 动态可选路由
    约定 [ $] 包裹的文件或文件夹为动态可选路由

比如:

src/pages/users/[id$].tsx 会成为 /users/:id?
src/pages/users/[id$]/settings.tsx 会成为 /users/:id?/settings
使用 umi + dva 搭建 react 项目

这样就算直接访问/test 或者 访问/test/:id都不会报错

使用 umi + dva 搭建 react 项目

安装 dva

yarn add dva

这里需要注意每个目录下面必须有一个service和model文件,具体代码见
https://github.com/wanglifa/umi-dva-react/tree/9a3a403a8d35e242ef77e04d068d3f3428a9dbff

effect 和 reducer 用法一样 都是用来通过触发 action 来修改 state 的

export default {
  namespace: 'users',
  state: {
    list: [],
    total: null,
  },
  reducers: {
    save(state, { payload: { data: list, total }, callback }) {
      const newState = { ...state, list, total };
      if (callback) {
        callback(newState)
      }
      return newState;
    },
  },
  effects: {
    *_getList({payload, callback}, { call }) {
      const response = yield call(getList, { payload });
      console.log(response)
      if (response.code === 200) {
        if (callback && typeof callback === 'function') {
          callback(response); // 返回结果
        }
      }
    },
  },
};

使用 dispatch 触发

useEffect(() => {
    dispatch({
      type: 'users/save',
      payload: {
        data: [{name: 'lifa'}],
        total: 2
      },
      callback: (res: any) => {
        console.log(res)
      },
    })
  }, [])
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。