React 数据状态管理 Dva

安装 Dva 依赖

通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。

npm install dva-cli -g

 

定义 Model

新建 model models/products.js ：

export default {
  namespace: 'Test',
  state: {
    name: 'chen',
  },
  effects: {
    *query({ payload }, { call, put }) {
      yield put({ type: 'save', payload });
    },
  },
  reducers: {
    save(state, action) {
      state.name = action.payload;
    },
  },
};


/* 
namespace: 当前 Model 的名称。整个应用的 State，由多个小的 Model 的 State 以 namespace 为 key 合成
state: 该 Model 当前的状态。数据保存在这里，直接决定了视图层的输出
reducers: Action 处理器，处理同步动作，用来算出最新的 State
effects：Action 处理器，处理异步动作
call：执行异步函数
put：发出一个 Action，类似于 dispatch
 */

这个 model 里：

• namespace 表示在全局 state 上的 key
• state 是初始值，在这里是空对象
• reducers 等同于 redux 里的 reducer，接收 action，同步更新 state

 

使用 model 状态管理

import Hello from '@/components/hello';
import { connect } from 'dva';
import React, { Component } from 'react';
import { Helmet } from 'umi';

class Test extends Component {
  change = () => {

    // 状态匹配修改,被 connect 的 Component 会自动在 props 中拥有 dispatch 方法。dispatch 是一个函数方法，用来将 Action 发送给 State。

    this.props.dispatch({
      type: 'user/query',
      payload: 'daming',
    });

  };

  render() {
    return (
      

        
          
          
          
        
        

         {/* 状态管理器数据挂在到组件的props上  */}
        {this.props.user.name}

        
change name
      
    );
  }
}

// connect 方法传入的第一个参数是 mapStateToProps 函数，mapStateToProps 函数会返回一个对 
   象，用于建立 State 到 Props 的映射关系。
  
const mapStateToProps = ({ user, loading }) => {
  return {
    user,
    loading: loading.models.user,
  };
};

const TestPage = connect(mapStateToProps)(Test);

export default TestPage;