Redux实操

一、实现在首页传入数据

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);

猜你喜欢