ReactDva状态管理model的使用和理解

一 概述

由于时间关系，测试内容可能有误，请看官主要理解总结中的内容。

二 环境搭建

本次演示环境使用UmiJs搭建，因为Dva已经很久不维护了，并且已经交由Umi管理，所以使用Umi来创建React项目是目前最方便的。参考官网环境搭建好后：如下

 三 使用

3.1 创建model文件

默认src/models下创建的所有符合model规范的文件都会自动注册到umijs中。创建src/models/users.js，

1.  
   import {apiUserList} from '@service/user.js'
2.  
   export default {
3.  
   namespace: 'users',
4.  
   state: {
5.  
   name: ''
6.  
   },
7.  
   effects: {
8.  
   *fetchUserName({ payload }, { call, put }) {
9.  
   const userName = yield call(apiUserList, payload)
10.  
    yield put({ type: 'setName', payload: userName })
11.  
    },
12.  
    },
13.  
    reducers: {
14.  
    setName(state, { payload }) {
15.  
    return {
16.  
    ...state,
17.  
    name: payload
18.  
    };
19.  
    },
20.  
    },
21.  
    };

 创建src/pages/user.jsx

1.  
   import React from 'react';
2.  
   import { connect } from 'dva';
3.  
    
4.  
   const users = ({ dispatch, userName }) => {
5.  
   const setUserName = () => {
6.  
   dispatch({
7.  
   type: 'users/setName',
8.  
   payload: '我小桃',
9.  
   });
10.  
    };
11.  
     
12.  
    return (
13.  
    <>
14.  
    <div>用户页面{userName}</div>
15.  
    <button onClick={setUserName}>点我修改</button>
16.  
    </>
17.  
    );
18.  
    };
19.  
     
20.  
    const mapStateToProps = (state) => {
21.  
    console.log(state);
22.  
    return {
23.  
    userName: state.users.name,
24.  
    };
25.  
    };
26.  
     
27.  
    export default connect(mapStateToProps)(users);

运行yarn start

个人使用总结：

model的使用

1. namespace

【命名空间】是外部分发（dispatch）调用model时，actions里type属性的前缀，后面跟reducers或effect的方法名。使用示例如下。model内部调用方法使用时可是省略前缀。

1.  
   dispatch({
2.  
   type: 'users/setName',
3.  
   payload: '我小桃',
4.  
   })

2. state

存储全局变量的仓库，核心使用的就是state，却是最简单理解的。结构对象和数组都可。

3. reducers

方法签名（state是状态，payload是分发时传的参数）

setName(state, { payload }) {}

唯一操作state的地方（CURD），即可对内（effects使用）也可对外。外部想要写state可以直接dispatch到reducers的方法来进行操作state。由于外部组件通过connect后可以获取（读）state的值，所以写操作必须使用dispatch。当然如果外部组件涉及到异步操作，比如删除用户是异步的话，这种情况往往实践都是直接dispatch到effects方法。而effects方法要处理需要分两步走：（1）调用异步接口删除用户数据（2）model内部dispatch到reducers的方法，让reducers删除state数据。

4. effects

使用示例

1.  
   *fetchUserName({ payload }, { call, put }) {
2.  
   const userName = yield call(apiUserList, payload)
3.  
   yield put({ type: 'setName', payload: userName })
4.  
   },

最佳实践，一般是做异步业务CRUD，调用接口后再调用reducers中的方法来重新设置state。往往是方便外部组件使用，外部只调用effects方法就完成2部操作操作接口和操作state。其实也可以外部组件自己调用异步接口，之后再dispatch到reducers，这样就能省下一个effects，看个人喜好推荐使用effects。

方法签名（①payload是外部dispatch时传的参数；②call是可以调用接口的方法，call调用接口时第一个参数是调用接口的方法名称，第二个参数是调用接口的参数；③put是effects特有的方法，类似外部调用的dispatch。dispatch和put参数数都是Action对象(Action对象包含type属性和payload属性）

---

外部组件使用model

1. 引入dva连接器

import { connect } from 'dva';

2. 使用连接器连接组件

export default connect(mapStateToProps)(组件名称);

3. 定义一个model中的state转为组件props的方法(方法返回值会赋值给props);

1.  
   const mapStateToProps = (state) => {
2.  
   console.log(state);
3.  
   return {
4.  
   userName: state.users.name,
5.  
   };
6.  
   };

4. 组件props自带dispatch方法和第三步转化后的属性

使用state

组件内部如果使用state，可以直接通过转化方法间接使用state。

1.  
   const 组件 = ({ dispatch, userName }) => {
2.  
    
3.  
   }

操作state

（1）如果需要异步修改数据库和state则可以dispatch到effects方法

（2）如果仅仅修改state不做接口调用，则dispatch到reducers方法即可。

1.  
   dispatch({
2.  
   type: '[namespace]/effects或reducers的方法名称',
3.  
   payload: '我小桃',
4.  
   });

（完~）

这篇好文章是转载于：学新通技术网