sunshinewyf / dva-example

dva2.x的简单小demo，包括增删改查

Description

the simple demo of dva and antd

Install

npm install

Run

npm start

Issues

• 提示[app.model] namespace should be defined
• dva1.x 和 dva2.x 中 subscriptions 的history.listen获取路由参数 #2
• 如何为页面添加 loading 状态

dva-example's Issues

dva1.x 和 dva2.x 中 subscriptions 的history.listen获取路由参数

在 dva1.x 中，组件的 的监听函数写法如下：

  function pageChangeHandler(page) {
    dispatch(routerRedux.push({
      pathname: '/users',
      query: { page },
    }));
  }

然后在 model 中的监听中可以如下面形式进行获取：

 subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname, query }) => {
        if (pathname === '/users') {
          dispatch({ type: 'fetch', payload: query });
        }
      });
    },
  },

但是在2.x中，history的 location 属性上不再包含 query, 需要 query-string 处理一遍。并且要把参数传到 location 中的 search 字段中，例子如下：

 function pageChangeHandle(page) {
    dispatch(
      routerRedux.push({
        pathname: "/user",
        search: "?page=" + page
      })
    );
  }

model 中的监听如下：

  subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname, search }) => {
        const query = queryString.parse(history.location.search)
        if (pathname === "/user") {
          dispatch({
            type: "fetch",
            payload: query ? query : 1
          });
        }
      });
    }
  }

提示[app.model] namespace should be defined

在 dva 项目中，根目录的index.js代码如下所示：

import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva();

// 2. Plugins
// app.use({});

// 3. Model
app.model(require('./models/user'));

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

会报错，如下：

改成如下即可：

import dva from 'dva';
import './index.css';
import UserModel from './models/user'

// 1. Initialize
const app = dva();

// 2. Plugins
// app.use({});

// 3. Model
app.model(UserModel);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

如何为页面添加 loading 状态

在 dva 项目中，model 是针对页面级的状态和 actions 的聚合。如果我想在页面在去请求数据的时候显示 loading 状态（即页面出现蒙层，不允许用户进行点击）可以使用如下方式进行实现：

step1:

安装 dva-loading库

step2:

在 index.js 中加入 dva-loading 插件：

import dva from 'dva';
import './index.css';
import UserModel from './models/user';
import createLoading from 'dva-loading';  //引入插件

// 1. Initialize
const app = dva();

// 2. Plugins
app.use(createLoading());   //使用插件

// 3. Model
app.model(UserModel);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

step3

在页面中添加 loading 状态：

function mapStateToProps(state) {
  const { list, total, page } = state.user;
  console.log(state)
  return {
    loading: state.loading.models.user,
    list,
    total,
    page
  };
}

export default connect(mapStateToProps)(User);

可以从 state 中去获取每个页面级 model 的 loading 状态，然后将 loading 作为 props 传入子组件即可