dva/dynamic

dynamic(app, model, component)

• app，挂载的对象，就是你要将这个router挂载到哪个实例上
• model，这个router所需要的model
• component，当前 router路由要加载的组件

dynamic(app, model, component )
import dynamic from "dva/dynamic"; 
import app from "../app"; 
export const UserPageDynamic = dynamic({ 
  app, 
  models: () => [import("../models/user")],
  component: () => import("../routes/UserPage")
});
const routerConfig = {
  '/': {
    component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
  },
  '/dashboard/analysis': {
    component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard')),
  },
}

models: () => [import(“../models/user”)]
为什么返回函数？
让他先不执行，调用时才执行；如果不是函数，直接就执行了

dva的三个方法
app.model
app.router
app.start

src/index.js

import React from 'react'
import dva, { connect } from 'dva'
import { Router, Route } from 'dva/router'
import dvaLoading from 'dva-loading'
import keymaster from 'keymaster'
import { createLogger } from 'redux-logger'
import './index.less'
const waitTime = (ms=1000) => new Promise(resolve => setTimeout(() => resolve(), ms))
// 1 初始化 onAction = applyMiddleware(createLogger)
const app = dva({
  onAction: createLogger(),
})
// 2. Plugins app.use()
app.use(dvaLoading())
/**
 多个 model，等价于 combineReducer
 state = {
   counter: { number: 0 },
   list: { number: 100 }
 }
 */
app.model({
  namespace: 'counter',
  state: { number: 0 },
  reducers: {
    // 属性名就是action-type,值就是一个函数，用来计算新状态的
    // store.dispatch({type:'counter/add'})
    add (state, action) {
      // action = {type:'counter/add', payload: {value: 100}}
      console.log('action', action)
      const { value } = action.payload
      return { number: state.number + value}
    },
    minus(state, action) {
      const { value } = action.payload
      return { number: state.number - value }
    },
    log(state) {
      console.log('reducers log')
      return { number: 100 }
    }
  },
  // 异步操作，都要放在 effects里面
  effects: {
    *asyncAdd(action, { put, call }) {
      yield call(waitTime)
      yield put({ type: 'add', payload: { value: 20 } }) // effect里面不需要写 namespace
    },
    *log(action, { select }) {
      let state = yield select(state => state.counter)
      console.log('effects log', state)
    }
  },
  subscriptions: {
    changeTitle({ history }) {
      history.listen((location) => {
        console.log(location)
        document.title = location.pathname
      })
    },
    keyboard({ dispatch }) {
      keymaster('space', () => {
        dispatch({ type: 'add' })
      })
    }
  }
})
// 可以定义多个 model
app.model({
  namespace: 'list',
  state: { array: [100], number: 100 },
  reducers: {
    add(state, action) {
      const { array, number } = state
      const { value } = action.payload
      const newValue = number + value
      return { number: newValue, array: [...array, newValue] }
    },
    minus(state, {payload}) {
      const { array, number } = state
      const newValue = number - payload.value
      return { number: newValue, array: [...array, newValue] }
    }
  }
})
// model 声明数据处理文件位置
// app.model(require('./models/list').default)
// connect连接组件和 dva model
const CounterConnect = connect(state => state.counter)(Counter)
const ListConnect = connect(state => state.list)(List)
// 4 挂载路由
app.router(props => {
  const { history } = props
  console.log(history, 100)
  return (
    <Router history={history}>
      <>
        <Route path="/" component={CounterConnect}/>
        <Route path="/list" component={ListConnect}/>
      </>
    </Router>
  )
})
// app.router(require('./router').default)
// app.start 启动项目
app.start('#root')
function Counter(props) {
  const { number, dispatch } = props
  const addAction = { type: 'counter/add', payload: { value: 100 } }
  const minusAction = { type: 'counter/minus', payload: { value: 30 } }
  return (
    <div>
      <h2>{number}</h2>
      <button onClick={() => dispatch(addAction)}>增加 100</button>
      <button onClick={() => dispatch(minusAction)}>减少 30</button>
      <hr/>
      <button onClick={() => dispatch({ type: 'counter/asyncAdd', payload: {value: 20}})}>async异步加 20</button>
      <button onClick={() => dispatch({ type: 'counter/logger' })}>console日志</button>
    </div>
  )
}
function List(props) {
  const { number, array, dispatch } = props
  const addAction = { type: 'list/add', payload: { value: 10 } }
  const minusAction = { type: 'list/minus', payload: { value: 1 } }
  return (
    <div>
      <h2>{ number }</h2>
      <p>{ String(array) }</p>
      <button onClick={() => dispatch(addAction) }>增加 10</button>
      <button onClick={() => dispatch(minusAction) }>减少 1</button>
    </div>
  )
}