Redux实操

亦凉 2022-04-16 01:56 313阅读 0赞

一、实现在首页传入数据

1.src项目文件夹下面，有home、types、reducers、action文件夹，home下有一个Home.js，需要在这个js文件开头引入

import { connect } from 'react-redux'
    import { getPatientsList } from "../action/studentAction";

第二个引入，5.中作介绍

2.在Home.js末尾

const mapStateToProp = state => ({
      listPatients: state.patientsListStore.listPatients
    });
    const mapDispatchToProp = dispatch => ({
      getPatientsList: self => dispatch(getPatientsList(self))
    });
    export default connect(
      mapStateToProp,
      mapDispatchToProp
    )(Home);

3.types下有一个types.js，需要对字段进行定义

export const STUDY_LIST = "students_list";

4.reducers下有一个studyReducer.js，注意下面的case后的字段必须与types.js定义的字段相同

import * as TYPES from "../types/types";
    
    const initialState = {
      listStudents: []
    };
    export default function studentsList(state = initialState, action) {
      switch (action.type) {
        case TYPES.STUDY_LIST:
          return {
            ...state,
            listStudents: action.text
          }
        default:
          return state;
      }
    }

5.action下有一个studentAction.js，这个文件需要引入到1.中的开头

7.行中listStudents是queries文件中定义的

studentsList是上面4.中第5行定义的函数名

import React, { Component } from "react";
    import * as TYPES from "../types/types";
    import { listStudents,getStudy } from "../graphql/queries";
    import { graphqlOperation, API } from "aws-amplify";
    
    export function getStudyList(self) {
      return async dispatch => {
        const newEvent = await API.graphql(graphqlOperation(listStudents));
        console.log(newEvent);
        if (newEvent) {
          dispatch(changePatientsListState(newEvent.data.listStudents.items));
        }
      };
    }
    function changePatientsListState(studentsStatus) {
      return {
        type: TYPES.PATIENTS_LIST,
        text: studentsList
      };
    }

二、首页点击查看详情，进入详情页。详情页下有多个子页，以其中一个子页SupportRecords.js为例。

src项目文件夹下面，有detail、types、reducers、action文件夹，detail下有一个SupportRecords.js，Detail.js。

1.Detail.js引入，第三个引入在下方中做介绍

import {connect} from 'react-redux';
    import SupportRecords from "./SupportRecords"
    import {getStudyStatus} from '../action/studyAction'

2.紧接一中的项目，一中的按钮

<Button
                            content="View Detail"
                            icon="right arrow"
                            labelPosition="right"
                            size="mini"
                            onClick={() => this.gotoDetailPage(students.userId)}
                          />

按钮跳转事件

gotoDetailPage(userId) {
        window.location.href = "/Detail?userId=" + userId;
      }

3.在Detail.js中

async componentDidMount() {
            const {getStudyStatus} = this.props;
            const id = this.props.location.search.split('=')[1];
            getStudyStatus(id);
    }

4.其余和一中相似，SupportRecords.js中开头引入

import { getStudentsList } from "../action/studyAction";
    import { connect } from 'react-redux'

结尾引入

const mapStateToProp = state => ({
        listStudents: state.studentsListStore.listStudents,
        studyStatus: state.studentsListStore.listStudents
    });
    const mapDispatchToProp = dispatch => ({
        getStudentsList: self => dispatch(getStudentsList(self))
    });
    export default connect(
        mapStateToProp,
        mapDispatchToProp
    )(SupportRecords);