React+dva异步effect+同步reducer获取models层的state数据注入props

朱雀 2022-12-08 05:35 420阅读 0赞

## 1.model定义自己的interface以及初始化默认的是state值 ##

export interface tableData { 
      tableList: any
    }
    const tableList: tableData = { 
      tableList: "000"
    }
    const TankManage: dvaRoot.DvaModel = { 
      namespace: 'tankManage',
      state: { 
        ...tableList
      }

## 2.编写查询effects方法： ##

*findTanks(action: dvaRoot.Action, effects: dvaRoot.Effects) { 
          const {  payload } = action
          const {  call, put, select } = effects
          const response = yield call(findTanks, payload)
          yield put({ 
            type: 'updateTanks',
            tableList: response
          })
        }

## 3.编写同步数据reducer方法updateListState ##

updateListState(state: tableData, action: dvaRoot.Action) { 
          return { 
            ...state,
            ...action
          }
        }

## 4.在前端组件页面connect ##

export default connect(mapStateToProps)(TableList)

## 5.编写mapStateToProps方法 ##

var queryData:any;
    const mapStateToProps = (state: store.Root): object => { 
      queryData =  state.tankManage.tableList
      return { 
        tableList:state.tankManage.tableList
      }
    }

## 6.使用model中的state数据 ##

const findTanks = (params?: TableListParams) => { 
        const {  dispatch } = props;
        const back = dispatch({ 
          type: 'tankManage/findTanks',           //指定哪个 model 层里面的哪个 方法
          payload: params
        }).then(()=>{ 
          return queryData
        })
        return Promise.resolve(back)
      }

发表评论取消回复

表情：

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

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

相关阅读

相关 React+dva异步effect+同步reducer获取models层的state数据注入props

1.model定义自己的interface以及初始化默认的是state值 export interface tableData { tableLis

朱雀/ 2022年12月08日 05:35/ 0 赞/ 421 阅读

相关 state和props混用

state和props混用 state是页面组件的初始数据（当前组件可以对state中的数据进行任意修改） props是父组件传递给子组件的数据（子组件只能读取prop

电玩女神/ 2022年12月05日 10:20/ 0 赞/ 141 阅读

相关 ionic异步请求同步获取数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

我会带着你远行/ 2022年11月06日 10:56/ 0 赞/ 183 阅读

相关一种 reducer state 的写法

import { Map, List} from 'immutable'; export default (state = Map(),

我会带着你远行/ 2022年06月01日 03:24/ 0 赞/ 172 阅读

相关 React组件的数据——prop和state

React组件数据分为两种，prop和state，无论prop或state改变，都可能引发组件的重新渲染，那么，设计一个组件的时候，什么时候选择用prop什么时候选择用stat

绝地灬酷狼/ 2022年05月25日 04:07/ 0 赞/ 257 阅读

相关 vue组件props中异步获取的数据

在使用vue组件时，我们不免使用props获取父组件的数据，对于父组件直接定义的数据，例如： data\{ sex: ‘男’， …. \} 我们直接使用即可

拼搏现实的明天。/ 2022年05月24日 01:25/ 0 赞/ 535 阅读

相关 dva学习---effects异步中通过select获取当前的state

根据在组件中dispatch一个action的例子中，如果要在effects中对于param数据和当前的state数据进行再出处理，这里怎么获取state呢？采用select

Bertha 。/ 2022年05月15日 05:42/ 0 赞/ 730 阅读

相关 dva model中的effect

在实际的开发中，计算新 state 时常常需要异步操作配合，比如说强制延时、异步网络请求数据（比如 ajax）等等。但是 reducer 需要是个纯函数，我们不能在 reduc

- 日理万妓/ 2022年04月24日 16:10/ 0 赞/ 328 阅读

相关 dva effect reducers 循环执行

`effects`和`reducers`的名字不要相同，不然你会很嗨的 import { findTablesWithPage } from '@/services

我就是我/ 2022年02月01日 23:23/ 0 赞/ 237 阅读

相关 ReactJS: Props与State区别

摘要 `props`与`state`的差别是React新手最常问到的问题？它们貌似相似，但用法其实完全不同。那它们的区别是什么呢？ Props “props”是什

朱雀/ 2021年11月09日 09:52/ 0 赞/ 326 阅读