关于react状态管理Dva

2,529 阅读1分钟

官方文档

数据流向

当发生交互行为时,会通过dispatch发起一个action,如果是同步行为则会通过reducer改变state,如果是异步行为则先触发effect然后流向reducer最终改变state,如下图:

image.png

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) 启动应用