Dva中在effects中获取state的值

简介: Dva中在effects中获取state的值

Dva中在effects中获取state的值



首先,看官网给出effects中的例子 effects详情见


it('put multi effects in order', done => {
    const app = create();
    app.model({
      namespace: 'counter',
      state: {
        count: 0,
        resolveCount: 0,
      },
      reducers: {
        dump(state, { payload }) {
          return {
            ...state,
            ...payload,
          };
        },
      },
      effects: {
        *changeCountDelay({ payload }, { put, call }) {
          yield call(delay, 200);
          yield put({ type: 'dump', payload: { count: payload } });
        },
        *process({ payload }, { put, select }) {
          yield put.resolve({ type: 'changeCountDelay', payload });
          const count = yield select(state => state.counter.count);
          yield put({ type: 'dump', payload: { resolveCount: count } });
        },
      },
    });


从这个例子我们可以看出

在effects中想要获得state中的值,需要解构出select方法


用法具体如下

const xxx = yield select( state => state.namespcae(你自己起的命名空间).想要取得的值)


运用


export default {
  namespace: 'CWL_UserSettingsModel',
  state: {
    pagination:{},
    userData: [],
    userInfo: {},
  },
  effects: {
    *addUser({payload},{call,put,select}){
      console.log('addUser',payload);
     const pagination = yield select(state => state.CWL_UserSettingsModel.pagination)
      const response = yield call (UserSettingService.addUser,payload)
      const {code} = response;
      if (response.code === 0) {
        message.success('新增用户成功');
        yield put({
          type: 'getList',
          payload: pagination,
        });
      }
      else{
        message.error("新增用户失败");
      }
    }
  },


通过这句话取到了state中pagination的值

const pagination = yield select(state => state.CWL_UserSettingsModel.pagination)


另外,如果你想在model中取到另一个model中state值,我们可以举一反三一下,只要在后面添加上你想取的model的namespace的值即可


比如:我想一个model中取到globalModel中的值

const globalModelData = yield select((state) => state.globalModel);


这样,我们就可以在一个Model中取到globalModel中的state值了

目录
相关文章
|
缓存 JavaScript 前端开发
看完这篇文章,不再害怕Vue3的源码(二)
看完这篇文章,不再害怕Vue3的源码
|
存储 JavaScript 前端开发
掌握这34个知识点,助你快速入门TS
TypeScript现在几乎已经是所有前端程序员必备的技能了,现在的各大框架已经全部采用TS进行开发。本篇文章总结了TS中常用的知识点,希望能对你有所帮助。
1409 0
|
Web App开发 资源调度 JavaScript
竟然可以在一个项目中混用 Vue 和 React?
竟然可以在一个项目中混用 Vue 和 React?
1284 0
|
JSON 前端开发 JavaScript
使用vite搭建一个React项目!真香!
【8月更文挑战第13天】使用vite搭建一个React项目!真香!
2260 3
使用vite搭建一个React项目!真香!
|
人工智能 JavaScript 索引
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
这篇文章讨论了在Vue中进行列表渲染时遇到的“Duplicate keys detected”错误。这个错误通常发生在使用 `v-for` 指令渲染列表时,如果没有为每个循环项指定一个唯一的 `key` 属性,或者指定的 `key` 属性值重复了。文章提供了导致错误的原始代码示例,并给出了修正后的代码,通过在 `key` 绑定中加入索引确保 `key` 的唯一性。此外,文章还解释了为什么需要唯一 `key` 以及如何解决这个问题。
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
|
前端开发 数据安全/隐私保护
react antd 实现修改密码(原密码,新密码,再次输入新密码,新密码增加正则复杂度校验)
文章介绍了如何在React项目中使用Ant Design实现一个修改密码的组件,包括原密码、新密码和再次输入新密码的表单项,并为新密码增加了正则表达式复杂度校验。
349 0
react antd 实现修改密码(原密码,新密码,再次输入新密码,新密码增加正则复杂度校验)
|
前端开发 JavaScript
使用 JavaScript 获取 URL 参数的详细指南
【2月更文挑战第26天】
14753 2
使用 JavaScript 获取 URL 参数的详细指南
|
Java Maven
构建Springboot项目、实现简单的输出功能、将项目打包成可以执行的JAR包(详细图解过程)
这篇文章详细介绍了构建SpringBoot项目的过程,包括新建工程、选择环境配置、添加依赖、项目结构说明,并演示了如何编写一个简单的Controller控制器实现输出功能,最后讲解了如何使用Maven将项目打包成可执行的JAR包,并提供了运行JAR包的命令和测试效果。
构建Springboot项目、实现简单的输出功能、将项目打包成可以执行的JAR包(详细图解过程)
|
前端开发
vscode 怎么在两个窗口打开同一个项目
vscode 怎么在两个窗口打开同一个项目
antd如何隐藏Upload组件的删除和预览图标
antd如何隐藏Upload组件的删除和预览图标
877 1

热门文章

最新文章