Question

我正在用react js创建一个示例应用程序，其中我从firestore中获取数据并在列表中进行设置，之后我使用过滤器从firestore中获取搜索结果。我能够得到那些结果，但是我现在不知道如何在redux中设置结果。虽然我在列表中使用redux，但是我不确定是否需要在过滤器中使用redux。有人可以帮助我怎么做吗。

具有redux的员工页面：

class Employee extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  static propTypes = {
    employees: PropTypes.arrayOf(PropTypes.object),
    history: PropTypes.object,
    onSetEmployees: PropTypes.func
  };

  componentDidMount() {
    const { onSetEmployees } = this.props;
    let employeeData = [];
    db.getEmployees().then((snapshot) => {
      snapshot.docs.forEach((doc) => {
        employeeData.push(doc);
      });
      onSetEmployees(employeeData);
    });
  }

  addEmployee = () => {
    this.props.history.push('/employee/new');
  };

  render() {
    const employees = this.props.employees;
    return (
      <div className="animated fadeIn">
        {employees.length > 0 ? (
          <EmployeeList employees={employees} />
        ) : (
          <h2> No Employees Available, Click + to add new Employees</h2>
        )}
        <Fab className="fab" onClick={this.addEmployee}>
          <MaterialIcon icon="add" color="#FFFFFF" />
        </Fab>
      </div>
    );
  }
}

const authCondition = (authUser) => !!authUser;

function mapStateToProps(state) {
  return {
    employees: state.employeeState.employees
  };
}

const mapDispatchToProps = (dispatch) => ({
  onSetEmployees: (employees) => dispatch({ type: 'EMPLOYEES_SET', employees })
});

export default compose(
  withAuthorization(authCondition),
  connect(mapStateToProps, mapDispatchToProps)
)(Employee);

员工列表页面：

    class EmployeeList extends Component {
  constructor(props) {
    super(props);
    this.state = { mobileno: '' };
  }

  handleChange(event, key) {
    this.setState({
      [key]: event.target.value
    });
  }

  onSubmit = (event) => {
    const { mobileno } = this.state;
    let employeeData = [];
    db.filterEmployees(mobileno).then((snapshot) => {
      snapshot.docs.forEach((doc) => {
        employeeData.push(doc);
      });
    });
    event.preventDefault();
  }

  static propTypes = {
    employees: PropTypes.arrayOf(PropTypes.object),
  };

  render() {
    const employees = this.props.employees;
    const { mobileno } = this.state;
    return (
      <div className="animated fadeIn">
        <Row>
          <Col>
            <Row>
              <Col>
                <Form className="form-horizontal" onSubmit={this.onSubmit}>
                  <FormGroup row>
                    <Col md="12">
                      <InputGroup>
                        <InputGroupAddon addonType="prepend">
                          <InputGroupText>
                            <i className="fa fa-search" />
                          </InputGroupText>
                        </InputGroupAddon>
                        <Input
                          type="text"
                          value={mobileno}
                          name="mobileno"
                          placeholder="Mobile No"
                          maxLength={10}
                          onChange={(event) => this.handleChange(event, 'mobileno')}
                        />
                        <InputGroupAddon addonType="append">
                          <Button type="submit" color="primary">
                            Submit
                          </Button>
                        </InputGroupAddon>
                      </InputGroup>
                    </Col>
                  </FormGroup>
                </Form>
              </Col>
              <Col>
                <nav>
                  <Pagination>
                    <PaginationItem>
                      <PaginationLink previous tag="button">
                        Prev
                      </PaginationLink>
                    </PaginationItem>
                    <PaginationItem active>
                      <PaginationLink tag="button">1</PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                      <PaginationLink tag="button">2</PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                      <PaginationLink tag="button">3</PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                      <PaginationLink tag="button">4</PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                      <PaginationLink tag="button">5</PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                      <PaginationLink next tag="button">
                        Next
                      </PaginationLink>
                    </PaginationItem>
                  </Pagination>
                </nav>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <Col>
            <Card>
              <CardHeader>Employee List</CardHeader>
              <CardBody>
                <Table hover bordered striped responsive size="lg">
                  <thead>
                    <tr>
                      <th>S.No</th>
                      <th>Name</th>
                      <th>Mobile no</th>
                      <th>Role</th>
                      <th>Options</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.map((employee, index) => {
                      return (
                        <tr key={employee.id}>
                          <td>{index + 1}</td>
                          <td>{employee.data().name}</td>
                          <td>{employee.data().mobileno}</td>
                          <td>{employee.data().role}</td>
                          <td>
                            <Link to={`/employees/${employee.id}`}>
                              <Button color="success" className="btn-pill">
                                <i className="fa fa-eye" />
                                &nbsp;View
                              </Button>
                            </Link>
                            &nbsp;&nbsp;
                            <Button color="warning" className="btn-pill">
                              <i className="fa fa-pencil" />
                              &nbsp;Edit
                            </Button>
                            &nbsp;&nbsp;
                            <Button color="danger" className="btn-pill">
                              <i className="fa fa-trash-o" />
                              &nbsp;Delete
                            </Button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </Table>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
}

export default EmployeeList;

减速器：

    const INITIAL_STATE = {
  employees: []
};

function employeeReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'EMPLOYEES_SET': {
      return { ...state, employees: action.employees };
    }
    default:
      return state;
  }
}

export default employeeReducer;

如何使用Redux在React JS中过滤列表

0 个答案: