dva 使用手册

dva

app = dva(opts)

• 创建应用，返回 dva 实例(注：dva 支持多实例)
• opts 包含如下配置：
  1. history：指定给路由用的 history，默认是 hashHistory
  2. initialState：指定初始数据，优先级高于 model 中的 state，默认是 {}
• 如果配置history 为 browserHistory，则创建dva对象可以写成如下写法

import createHistory from 'history/createBrowserHistory';
const app = dva({
   
  history: createHistory(),
})

• 出于易用性的考虑，opts 里也可以配所有的 hooks ，下面包含全部的可配属性：

const app = dva({
   
  history,
  initialState,
  onError,
  onAction,
  onStateChange,
  onReducer,
  onEffect,
  onHmr,
  extraReducers,
  extraEnhancers,
})

• 示例一：如果我们使用 antd 组件，那么最简单的全局错误处理通常会这么做：

import {
    message } from 'antd'
const app = dva({
   
  onError(e) {
   
    message.error(e.message, 3)
  },
})

• 示例二：在 action 被 dispatch 时触发，用于注册 redux 中间件。支持函数或函数数组格式。例如我们要通过 redux-logger 打印日志：

import createLogger from 'redux-logger';
const app = dva({
   
  onAction: createLogger(opts),
})

app.use(hooks)

• 配置 hooks 或者注册插件。（插件最终返回的是 hooks ）
• 比如注册 dva-loading 插件的例子：

import createLoading from 'dva-loading'
...
app.use(createLoading(opts))

app.model(model)

• 注册model，这个操作时dva中核心操作，下面单独做详解

app.unmodel(namespace)

• 取消 model 注册，清理 reducers, effects 和 subscriptions。subscription 如果没有返回 unlisten 函数，使用 app.unmodel 会给予警告⚠️

app.router(({ history, app }) => RouterConfig)

• 注册路由表，这一操作步骤在dva中也很重要

// 注册路由
app.router(require('./router'))

// 路由文件
import {
    Router, Route } from 'dva/router';
import IndexPage from './routes/IndexPage'
import TodoList from './routes/TodoList'

function RouterConfig({
    history }) {
   
  return (
    <Router history={
   history}>
        <Route path="/" component={
   IndexPage} />
        <Route path='/todoList' components={
   TodoList}/>
    </Router>
  )
}
export default RouterConfig

• 当然，如果我们想解决组件动态加载问题，我们的路由文件也可以按照下面的写法来写

import {
    Router, Switch, Route } from 'dva/router'
import dynamic from 'dva/dynamic'

function RouterConfig({
    history, app }) {
   
  const IndexPage = dynamic({
   
    app,
    component: () => import('./routes/IndexPage'),
  })

  const Users = dynamic({
   
    app,
    models: () => [import('./models/users')],
    component: () => import('./routes/Users'),
  })

  return (
    <Router history={
   history}>
      <Switch>
        <Route exact path="/" component={
   IndexPage} />
        <Route exact path="/users" component={
   Users} />
      </Switch>
    </Router>
  )
}

export default RouterConfig

• 其中 dynamic(opts) 中opt包含三个配置项：
  • opts
    • app: dva 实例，加载 models 时需要
    • models: 返回 Promise 数组的函数，Promise 返回 dva model
    • component：返回 Promise 的函数，Promise 返回 React Component

app.start(selector?)

• 启动应用，selector 可选，如果没有 selector 参数，会返回一个返回 JSX 元素的函数

app.start('#root')

• 那么什么时候不加 selector？常见