• dvaJs在react 项目中的简单使用


    官网:入门课 | DvaJS

    备注:个人学习

    代码示例:

    getColumns.js

    1. const getColumns = [
    2. {
    3. title: '姓名', // 列标题
    4. dataIndex: 'name', // 数据字段名称,与数据中的字段名对应
    5. key: 'name', // 列的唯一键
    6. },
    7. {
    8. title: '年龄', // 列标题
    9. dataIndex: 'age', // 数据字段名称,与数据中的字段名对应
    10. key: 'age', // 列的唯一键
    11. },
    12. ];
    13. export default getColumns

    model.js

    1. import {
    2. Test
    3. } from 'utils/api'
    4. export default {
    5. namespace: "myName",
    6. state: {
    7. jsonData: [],
    8. },
    9. effects: {
    10. // 获取列表信息
    11. * getMyName({}, {put, call, select}) {
    12. const res = yield call(Test);
    13. console.log("======================================================",res.data)
    14. if (res.meta.statusCode === 200) {
    15. // 设置state
    16. yield put({
    17. type: "selectMyName",
    18. payload: {
    19. jsonData: res.data,
    20. }
    21. });
    22. }
    23. },
    24. },
    25. reducers: {
    26. selectMyName(state, {payload}) {
    27. return {...state, ...payload};
    28. },
    29. setState(state, { jsonData }) {
    30. return {
    31. ...state,
    32. ...jsonData
    33. };
    34. }
    35. }
    36. };

     index.js

    1. import React from "react";
    2. import {connect} from "react-redux";
    3. import { Button, Table} from "antd";
    4. import styles from "../ordinary/index.less";
    5. import PermissionDiv from "utils/PermissionDiv";
    6. import getColumns from "../ordinary/getColumns";
    7. @connect((state) => {
    8. const {myName, login} = state;
    9. return {...myName, login};
    10. })
    11. export default class Test extends React.Component {
    12. constructor(props) {
    13. super(props);
    14. }
    15. // static getDerivedStateFromProps(nextProps,nextState) {
    16. // console.log("========================",nextProps,nextState)
    17. // }
    18. componentWillMount() {
    19. console.log("666",this.props)
    20. //获取已存在的发起单位list
    21. this.props.dispatch({
    22. type: 'myName/getMyName'
    23. });
    24. }
    25. render() {
    26. const { jsonData } = this.props;
    27. console.log("查出来的数据",jsonData)
    28. const columns = getColumns
    29. return (
    30. <div className={styles.box}>
    31. <div className={styles.topBoxL} id="coll_xzrw">
    32. <PermissionDiv perms={"ly-dcp_fill_collection_test_add"}>
    33. <Button type="primary">
    34. 新增任务
    35. Button>
    36. PermissionDiv>
    37. div>
    38. <Table dataSource={jsonData} columns={columns} rowKey="name" />
    39. div>
    40. );
    41. }
    42. }

    Dva.js 是一个基于 React 和 Redux 的轻量级前端框架,用于帮助开发者更容易地管理应用的状态和副作用。Dva.js 在 React 应用中提供了一种可预测的状态管理方式,并降低了 Redux 的复杂性。dva 是体验技术部开发的 React 应用框架,将上面三个 React 工具库包装在一起,简化了 API,让开发 React 应用更加方便和快捷。

    dva = React-Router + Redux + Redux-saga

    dva 应用的最简结构

    1. import dva from 'dva';
    2. const App = () => <div>Hello dvadiv>;
    3. // 创建应用
    4. const app = dva();
    5. // 注册视图
    6. app.router(() => <App />);
    7. // 启动应用
    8. app.start('#root');

     数据流图

    核心概念:

    • State:一个对象,保存整个应用状态
    • View:React 组件构成的视图层
    • Action:一个对象,描述事件
    • connect 方法:一个函数,绑定 State 到 View
    • dispatch 方法:一个函数,发送 Action 到 State

    State 和 View

    State 是储存数据的地方,收到 Action 以后,会更新数据。

    View 就是 React 组件构成的 UI 层,从 State 取数据后,渲染成 HTML 代码。只要 State 有变化,View 就会自动更新。

    Action


    Action 是用来描述 UI 层事件的一个对象。

    1. {
    2. type: 'click-submit-button',
    3. payload: this.form.data
    4. }

    connect 方法

    connect 是一个函数,绑定 State 到 View。

    1. import { connect } from 'dva';
    2. function mapStateToProps(state) {
    3. return { todos: state.todos };
    4. }
    5. connect(mapStateToProps)(App);

    connect 方法返回的也是一个 React 组件,通常称为容器组件。因为它是原始 UI 组件的容器,即在外面包了一层 State。

    connect 方法传入的第一个参数是 mapStateToProps 函数,mapStateToProps 函数会返回一个对象,用于建立 State 到 Props 的映射关系。

    dispatch 方法

    dispatch 是一个函数方法,用来将 Action 发送给 State。

    1. dispatch({
    2. type: 'click-submit-button',
    3. payload: this.form.data
    4. })

    dispatch 方法从哪里来?被 connect 的 Component 会自动在 props 中拥有 dispatch 方法。

    connect 的数据从哪里来?

    dva 应用的最简结构(带 model)

    1. // 创建应用
    2. const app = dva();
    3. // 注册 Model
    4. app.model({
    5. namespace: 'count',
    6. state: 0,
    7. reducers: {
    8. add(state) { return state + 1 },
    9. },
    10. effects: {
    11. *addAfter1Second(action, { call, put }) {
    12. yield call(delay, 1000);
    13. yield put({ type: 'add' });
    14. },
    15. },
    16. });
    17. // 注册视图
    18. app.router(() => <ConnectedApp />);
    19. // 启动应用
    20. app.start('#root');

    数据流图 1

    数据流图 2

    app.model

    dva 提供 app.model 这个对象,所有的应用逻辑都定义在它上面。

    1. const app = dva();
    2. // 新增这一行
    3. app.model({ /**/ });
    4. app.router(() => <App />);
    5. app.start('#root');

    Model 对象的例子

    1. {
    2. namespace: 'count',
    3. state: 0,
    4. reducers: {
    5. add(state) { return state + 1 },
    6. },
    7. effects: {
    8. *addAfter1Second(action, { call, put }) {
    9. yield call(delay, 1000);
    10. yield put({ type: 'add' });
    11. },
    12. },
    13. }

    Model 对象的属性

    • namespace: 当前 Model 的名称。整个应用的 State,由多个小的 Model 的 State 以 namespace 为 key 合成
    • state: 该 Model 当前的状态。数据保存在这里,直接决定了视图层的输出
    • reducers: Action 处理器,处理同步动作,用来算出最新的 State
    • effects:Action 处理器,处理异步动作

    Reducer

    Reducer 是 Action 处理器,用来处理同步操作,可以看做是 state 的计算器。它的作用是根据 Action,从上一个 State 算出当前 State。

    一些例子:

    1. // count +1
    2. function add(state) { return state + 1; }
    3. // 往 [] 里添加一个新 todo
    4. function addTodo(state, action) { return [...state, action.payload]; }
    5. // 往 { todos: [], loading: true } 里添加一个新 todo,并标记 loading 为 false
    6. function addTodo(state, action) {
    7. return {
    8. ...state,
    9. todos: state.todos.concat(action.payload),
    10. loading: false
    11. };
    12. }

    Effect

    Action 处理器,处理异步动作,基于 Redux-saga 实现。Effect 指的是副作用。根据函数式编程,计算以外的操作都属于 Effect,典型的就是 I/O 操作、数据库读写。

    1. function *addAfter1Second(action, { put, call }) {
    2. yield call(delay, 1000);
    3. yield put({ type: 'add' });
    4. }

    Generator 函数

    Effect 是一个 Generator 函数,内部使用 yield 关键字,标识每一步的操作(不管是异步或同步)。

    call 和 put

    dva 提供多个 effect 函数内部的处理函数,比较常用的是 callput

    • call:执行异步函数
    • put:发出一个 Action,类似于 dispatch

  • 相关阅读:
    Redis初步学习
    HTB-Validation
    【pytorch】torch.cuda.is_available() = False 可能的解决办法
    多端开发之uniapp开发app
    Apache Commons Pool2 池化技术
    HTML+CSS网页设计期末课程大作业 【茶叶文化网站设计题材】web前端开发技术 web课程设计 网页规划与设计
    认识计算机中的简单指令集
    Synaptic Systems NeuN抗体的应用和参考文献
    9月24日,每日信息差
    【安信可NB-IoT模组EC系列应用笔记⑦】用这篇文章学会使用EC系列模组的MQTT
  • 原文地址:https://blog.csdn.net/XikYu/article/details/133887908