react项目 umi环境 redux 使用

redux

• namespace
• state
• effects 使用
• reducers 使用
• connect 使用

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)