react-redux实现，搜索

1.home.js

import React, { Component } from "react";
import { connect } from 'react-redux'
import {
  Table,
  Menu,
  Icon,
  Popup,
  Button,
  Header,
  Input
} from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import "./DeviceList.css";
import {getPatientInfo } from "../action/searchAction.js";
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchQuery: "",
      sirenId: "",
      userId: "",
      fullName: "",
      phone: "",
      isSearchOpen: false
    };
  }
  handleSearchItemsChange(searchText,event) {
    if(searchText === 'sirenId'){
      this.setState({sirenId:event.target.value});
    }else if(searchText === 'userId'){
      this.setState({userId:event.target.value});
    }else if(searchText === 'fullName'){
      this.setState({fullName:event.target.value});
    }else if(searchText === 'phone'){
      this.setState({phone:event.target.value});
    }
  }

  searchItems = () => {
    const{getPatientInfo} = this.props;
    getPatientInfo(this,this.props.listPatients);
  };

  render() {
    let self = this;
    return (
      <div className="device-list-container">
        <Header as="h2" style={{ float: "left" }}>
          <Icon name="treatment" />
          <Header.Content>User List</Header.Content>
        </Header>
        <div id="user-search-bar">
          <Popup
            trigger={
              <Input
                icon={
                  <Icon
                    name="search"
                    onClick={() => self.searchItems()}
                    circular
                    link
                  />
                }
                placeholder="Search..."
                id="search-bar"
                value={this.state.searchQuery}
              />
            }
            position="bottom left"
            flowing
            on="click"
          >
            <div className="search-item-container">
              <Input
                label="Siren ID"
                placeholder="siren id"
                className="search-items"
                value={this.state.sirenId}
                onChange={event=>this.handleSearchItemsChange("sirenId",event)}
              />
              <br />
              <Input
                label="User ID"
                placeholder="user id"
                className="search-items"
                value={this.state.userId}
                onChange={event=>this.handleSearchItemsChange("userId",event)}
              />
              <br />
              <Input
                label="Name "
                placeholder="name"
                className="search-items"
                value={this.state.fullName}
                onChange={event=>this.handleSearchItemsChange("fullName",event)}
              />
              <br />
              <Input
                label="Phone "
                placeholder="phone"
                className="search-items"
                value={this.state.phone}
                onChange={event=>this.handleSearchItemsChange("phone",event)}
              />
            </div>
          </Popup>
        </div>
      </div>
    );
  }
}

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

2.searchAction.js

import * as TYPES from "../types/types";
import { listPatients,getPatient } from "../graphql/queries";
import { graphqlOperation, API } from "aws-amplify";
export function getPatientInfo(self,patientList){
  return dispatch=>{
    const patients = [];
    patientList.map(item=>{
      if(
        (self.state.sirenId != null && item.sirenId===parseInt(self.state.sirenId))
      ||(self.state.userId != null && item.userId===self.state.userId)
      ||(self.state.fullName != null && item.fullName===self.state.fullName)
      ||(self.state.phone != null && item.phone===self.state.phone)
      ){
        patients.push(item);
      }
    });
    console.log('patients: ',patients);
    dispatch(changeSearchListState(patients));
  };
}

function changeSearchListState(patients){
  return{
    type: TYPES.SEARCH_LIST,
    text: patients
  }
}

3.type.js

export const SEARCH_LIST = "search_list";

4.searchReducer.js

import * as TYPES from "../types/types";

const initialState = {
  listPatients: [],
  patientStatus: {}
};

export default function patientsList(state = initialState, action) {
  switch (action.type) {
    case TYPES.SEARCH_LIST:
      return{
        ...state,
        listPatients: action.text
      }
    default:
      return state;
  }
}