使用 umi + dva 搭建 react 项目

起步

首先通过 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' },
  ],
}

2. 如果 .umirc.ts 里没有 routes 那么文件系统即路由，通过目录和文件及其命名分析出路由配置

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

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

4. 动态可选路由
   约定 [ $] 包裹的文件或文件夹为动态可选路由

比如：

src/pages/users/[id$].tsx 会成为 /users/:id?
src/pages/users/[id$]/settings.tsx 会成为 /users/:id?/settings

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

安装 dva

yarn add dva

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

reducer 和 effect 的用法

dva里想要修改 modal 里的 state，只能通过 reducer 来修改，如果是同步的直接通过 dispatch 触发 reducer，如果需要异步修改那么我们就在effect里，成功后调用 reducer
1). 通过 effect 调用接口成功后修改 state

export default {
  namespace: 'users',
  state: {
    list: [],
    total: null,
  },
  reducers: {
    modifyList(state, { payload }) {
      return {...state, ...payload}
    },
  },
  effects: {
    *_getList({payload, callback}, { call, put }) {
      const response = yield call(getList, { payload });
      console.log(response)
      if (response.code === 200) {
        if (callback && typeof callback === 'function') {
          callback(response); // 返回结果
          // 调用接口成功后修改 state
          yield put({
            type: 'modifyList',
            payload: {list: response.data}
          })
        }
      }
    },
  },
};

使用 dispatch 触发

useEffect(() => {
    dispatch({
      type: 'users/save',
      payload: {
        data: [{name: 'lifa'}],
        total: 2
      },
      callback: (res: any) => {
        console.log(res)
      },
    })
  }, [])

2). 直接通过 reducer 修改 state

import React, {memo} from 'react;
import { connect } from 'dva';
const Test = (props) => {
  const { users } = props;
  const handleModifyList = () => {
  dispatch({
    type: 'users/modifyList',
     payload: {
    // 修改 state 里的 list 的值
       list: [{a: 1}]
     }
  })
}
return (
  <>
    <div>{users.list[0]}</div>
    <Button onClick={handleModifyList}>点我</Button>
  </>
)

}
export default connect(({users}) => ({users}))(memo(Test))

何时使用 state

1). 对于没有父子关系的组件
2). 层级很深的父子组件，一个属性传了超过两次的时候
如何使用
1). 引入 connect
2). connect 的第一个参数为我们需要拿到 state 的 modal 的namespace

connect(({users}) => ({users}))

3). 通过 props.modal里的namespace获取对应的state
如

props.users.list