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)