dva学习记录

灰太狼 2022-10-13 05:09 157阅读 0赞

定义这个参数

const LinkParams = {
      namespace: 'linkParams',
      state: {
        passLinkParams: {},
      },
      reducers: {
        changeParams(state, { payload:params }) {
          return {
            ...state,
            passLinkParams: params
          };
        },
      },
    };
    export default LinkParams;

点击按钮执行changeParams

import React from 'react';
    import { Radio } from 'antd';
    import { connect } from 'dva';
    import styles from './index.less';
    
    function Example(props) {
      const { dispatch, } = props;
    
      function handleSegmentChange(e) {
        dispatch({
          type: 'linkParams/changeParams',
          payload: {...queryParams,paneGoods:e.target.value,},
        });
      }
    
      return (
        <div className={styles.container}>
          <Radio.Group className={styles.segmentWrapper} value={segment}  onChange={handleSegmentChange}>
            <Radio.Button value="1">
              1
            </Radio.Button>
            <Radio.Button value="2">
              2
            </Radio.Button>
          </Radio.Group>
        </div>
      );
    }
    
    export default connect(({ linkParams }) => ({
      passLinkParams: linkParams.passLinkParams || {},
    }))(Example);

读取值

import React from 'react';
    import { connect } from 'dva';
    
    function Index(props) {
      const { passLinkParams,} = props;
      console.log('=======passLinkParams',passLinkParams)
    
      return (
        <div>
            {passLinkParams}
        </div>
      );
    }
    
    export default connect(({ linkParams }) => ({
      passLinkParams: linkParams.passLinkParams || {},
    }))(Index);

借鉴学习来源：[https://dvajs.com/guide/\#%E7%89%B9%E6%80%A7][https_dvajs.com_guide_E7_89_B9_E6_80_A7]

[https_dvajs.com_guide_E7_89_B9_E6_80_A7]: https://dvajs.com/guide/#%E7%89%B9%E6%80%A7

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关 React之Dva的学习

一、创建Dva工程我们前两篇都是用create-react-app创建工程的，但是它只能创建一个最基本的空程序。在前两篇中，我们自己用npm装上了router，re...

怼烎@/ 2024年04月18日 17:33/ 0 赞/ 2 阅读

相关 dva入门

一、dva 介绍 dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router

水深无声/ 2022年12月20日 03:10/ 0 赞/ 126 阅读

相关 dva学习采坑记录

dva学习采坑记录 1、引入dva后报错![在这里插入图片描述][20210309183040160.png] -------------------- 解决 1、

怼烎@/ 2022年10月23日 08:20/ 0 赞/ 108 阅读

相关 dva学习记录

定义这个参数 const LinkParams = { namespace: 'linkParams', state: { p

灰太狼/ 2022年10月13日 05:09/ 0 赞/ 158 阅读

相关 dva学习-model的数据管理

例如默认的代码如下： model文件夹中的文件内容介绍 export default { namespace: 'example',

迈不过友情╰/ 2022年05月17日 13:20/ 0 赞/ 159 阅读

相关 dva学习-定义UI组件

定义组件有三种方式：这个一般是放在component文件中，这个组件一般在routes文件的路由组件调用这些组件，通过标签的形式，如下第二中方式里调用这个组件

我会带着你远行/ 2022年05月17日 13:19/ 0 赞/ 166 阅读

相关 dva学习-route路由学习

dva是单页面应用，虽然有不同的路由页面，但是变化的都是js文件。命令：curl + 网址可以查看当前网址的html，如果不同路由显示的都是相

逃离我推掉我的手/ 2022年05月17日 13:15/ 0 赞/ 224 阅读

相关 dva学习---model中的subscription订阅

model中的subscription相当于一个监听器，可以监听路由变化，鼠标，键盘变化，服务器连接变化，状态变化等，这样在其中就可以根据不同的变化做出相应的处理，在这

Myth丶恋晨/ 2022年05月15日 05:48/ 0 赞/ 226 阅读

相关 Dva学习笔记

Dva学习笔记本文是基于Windows 10系统环境，学习和使用Dva： Windows 10 -------------------- 一、dva状态管

悠悠/ 2021年09月21日 02:54/ 0 赞/ 431 阅读

相关学习react前端框架dva

dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架，在作者的 github 里是这么描述它的：“dva 是 react 和 redux 的最佳实践”。

女爷i/ 2021年09月16日 04:40/ 0 赞/ 429 阅读