react项目 umi环境 redux 使用

卫焕
2023-12-01

namespace

命名空间,用于区分多个model

state

用于存放私有数据

effects 使用

effects 是 model的一个方法,用于处理数据数据,比如处理接口请求
model.ts文件

 effects: {
    *fetchData({ payload }, { call, put }) {
      //异步数据调用service接口的行为叫做call(召唤)
      // payload: dispatch调用时传入的数据
      yield call(loadList, payload);
      console.log(payload, 'payload')
      // 异步的数据不能直接调回给页面,要先给(put)同步,再给(connect)页面
      // put 传入的是 reducers方法
      yield put({
        type: 'saveFormValues',
        payload,
      });
    },
  },

页面调用effects中的方法
index.tsx文件

 dispatch({
    type: '命名空间/fetchData',
    payload: data // 传入的数据
 })

reducers 使用

是一个纯函数,接受旧的state和新的action,返回新的state.
reducer是改变state,触发action提交的唯一方式,它接收两个参数:state和action,state是原始store中的state,触发更改之后就是提交更改前的state,action代表提交行为(type)和payload。

reducers: {
   saveFormValues(state, { type, payload}){
      // return 的数据,相当于更改了state 数据
      return {
        ...state,
        ...payload
      };
   },
 }

connect 使用

model 是一个公共保存数据流的地方
model 数据传入页面,使用 connect方法 作为连接
index.tsx文件

import React, { Component } from 'react'
import { connect } from 'umi'  // 使用umi架构

export class index extends Component {
  const { name } = this.props
  render() {
    return (
      <div>
        姓名:{ name }
      </div>
    )
  }
}
//页面获取state内的数据,传入props
const mapStateToProps = (state) => ({
  name: state.命名空间.name
})
// 页面调用effects中的方法,传入props
const mapDispatchToProps = {
  
}

export default connect(mapStateToProps, mapDispatchToProps)(index)
 类似资料: