数据流向
当发生交互行为时,会通过dispatch发起一个action,如果是同步行为则会通过reducer改变state,如果是异步行为则先触发effect然后流向reducer最终改变state,如下图:
Models
namespace: 唯一命名空间
State: Model的状态数据
Action: 改变state的唯一途径,通过dispatch发起一个action
dispatch:
dispatch({
type: 'user/add', // 如果在 model 外调用,需要添加 namespace
payload: {}, // 需要传递的信息
});
Reducer: 用于处理同步操作,唯一可以修改 state 的地方。由 action 触发,格式为 (state, action) => newState 或 [(state, action) => newState, enhancer]
Effect: 用于处理异步操作和业务逻辑,不直接修改 state。
Subscription: 语义是订阅,用于订阅一个数据源,然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。
Api
1.const app = dva(options) 创建应用,返回dva实例。
const app = dva({
history: 默认为hashHistory
initialState: 指定初始数据,优先级高于model中的state
onError: 坚定全局错误
onAction:
onStateChange: state改变时触发
onReducer: 封装 reducer 执行
onEffect: 封装 effect 执行
onHmr:
extraReducers:
extraEnhancers:
})
2.app.use(hooks) 配置hooks或者注册插件。
3.app.model(model) 注册model
4.app.unmodel(namespace) 取消注册model
5.app.router(({history, app}) => RouterConfig) 注册路由表
import { Router, Route } from 'dva/router';
app.router(({ history }) => {
return (
<Router history={history}>
<Route path="/" component={App} />
<Router>
);
});
推荐把路由信息抽成一个单独的文件
app.router(require('./router'))
6.app.start(selector) 启动应用