Dva - react状态管理 - 给vuex开发者

react语法 - 给vue开发者
React Router 5.x - 给vuex开发者
Redux - 给vue开发者

• 基于 redux（不支持异步）

• 基于 redux-saga，处理异步（的补丁?）

• 额外内置了 react-router 和 fetch（fetch 不是原生方法吗）

• 打包辅助工具使用roadhog

它是一个脚手架

（DVA 官网关于 他是如何工作的、与 redux 和 mobx 的区别 两块是空的...何必写这标题）

$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1
$ dva new dva-test

目录结构

|- models       store？
|- routes       其实是pages
|- router.js    路由文件
|- index.js     入口文件

Model & Reducers

// models/users.js
export default {
  namespace: "users", // 全局 state 上的 key
  state: [],
  reducers: {
    // 接收 action，同步更新 state
    delete(state, { payload: id }) {
      return state.filter((item) => item.id !== id);
    },
  },
};

// 起始文件
app.model(require("./models/users").default);

subscriptions

官方只有一句话：数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等

  subscriptions: {
    //监听地址，如果地址含有app则跳转到登陆页
    setup({ dispatch, history }) {
      history.listen(location => {
        if (location.pathname.includes('app')) {
          dispatch({ type: 'gologin' })
        }
      });
    },
    keyEvent({dispatch}) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
  },

effects，内部方法为 Generator 函数

// models/users.js
  effects: {
    // put 即 dispatch，call即js中的call
    *delayAdd({ payload }, { put, call }) {
      yield call(function () {
        return new Promise((res) => {
          setTimeout(() => res() }, 1000);
        });
      });
      const dt = new Date();
      const params = { id: dt.getTime(), name: dt.toLocaleString() };
      yield put({ type: "add", params });
    },
  },

// IndexPage
  function Edit() {
    dispatch({ type: "users/delayAdd" });
  }

connect

import { connect } from "dva";

function IndexPage({ dispatch, users }) {
  function Add() {
    const dt = new Date();
    const payload = { id: dt.getTime(), name: dt.toLocaleString() };
    // 触发 users.js 的reducers，同步更新state
    dispatch({ type: "users/add", payload });
  }

  return (
    <>
      <ul>
        {/* 这里可以直接使用的users => users.js的state */}
        {users.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={Add}>添加</button>
    </>
  );
}

export default connect(({ users }) => ({
  users, // 将 users 和 dispatch(默认) props 进 IndexPage
}))(IndexPage);

vuex 与 dva 对照表

.

• console.log(app._store) 顶部的 state 数据

• modal 可以是动态、非全局的

• modal 只是一个对象，可以对其进行深拷贝来适应两个相似的需求

• 并发 effects：const [r1, r2] = yield all([call(..), call(..)])，除了 all 还有 race

• take 事件监听(redux-saga 语法)？？？

• 自动处理loading事件

• effects 中路由跳转使用 yield put(routerRedux.push("/welcome"));