React-Redux - 创建搜索过滤器

Question

我需要帮助才能在我的应用中创建搜索过滤器.它是一个简单的应用程序,用于研究目的.

目标是创建一个搜索过滤器.我在search_bar容器中有状态,我想我需要将它作为道具传递给我的work_list容器.但我不知道该怎么做.从那个阶段我会做到这样的事情.

work_list.js

renderWork() {

    let filteredWorks = this.props.works.filter((work) => {
      return work.title.indexOf(this.state.init) !== -1;
    }
    );


    return filteredWorks.map((work) => {
      return (
        <tr>
          <td>{work.title}</td>
        </tr>
      );
    });
  }

我不知道逻辑是否正确.需要帮忙.

app.js

import React, { Component } from 'react';
import SearchBar from '../containers/search_bar';
import WorkList from '../containers/work_list.js';

export default class App extends Component {
  render() {
    return (
      <div>
        <SearchBar/>
        <WorkList/>
      </div>
    );
  }
}

search_bar.js

import React, { Component } from 'react';

export default class SearchBar extends Component {

  constructor(props) {
    super(props);
    this.state = { init: '' };
    this.onInputChange = this.onInputChange.bind(this);
  }

  onInputChange(event) {
    this.setState({ init: event.target.value });
  }

  onFormSubmit(event) {
    event.preventDefault();
  }
  render() {
    return (
      <form
        onSubmit={this.onFormSubmit}
        className="input-group">
        <input
          className="form-control"
          placeholder = "Procurar Trabalho"
          onChange={this.onInputChange}
          value={this.state.init} />
        <span className="input-group-btn">
          <button type="submit" className="btn btn-secondary">Pesquisar</button>
        </span>
      </form>
    );
  }
} 

work_list.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchWork } from '../actions/index';

class WorkList extends Component {

  renderWork() {
    return this.props.works.map((work) => {
      return (
        <tr>
          <td>{work.title}</td>
        </tr>
      );
    });
  }

  render() {
    return (
      <table className="table table-hover">
        <thead>
          <tr>
            <th>Nome</th>
          </tr>
        </thead>
        <tbody>
          {this.renderWork() }
        </tbody>
      </table>

    );
  }
}

function mapStateToProps(state) {
  return {
    works: state.works
  }
}

export default connect(mapStateToProps)(WorkList);

我的减速器

reducer_work.js

export default function () {
  return [
    { title: 'Mirististica' },
    { title: 'Vet' }
  ];
}

index.js

import { combineReducers } from 'redux';
import MostrarTrabalhos from './reducer_work';

const rootReducer = combineReducers({
    works : MostrarTrabalhos
});

export default rootReducer;

谢谢 !

Answer 1

看起来您的代码缺少Redux工作的一些关键元素.当您的搜索输入发生更改时,您需要调度Redux操作,从而更新商店.现在,您只是设置SearchBar输入更改时的本地状态.其次,你的reducer不会修改状态,它总是返回相同的数组.

沿着这些方向的东西.

您的操作文件可能如下所示:

export const SEARCH = 'SEARCH';

export function search(value) {
  return {type: SEARCH, value};
}

然后你的reducer可能看起来像这样:

import {SEARCH} from './actions';

const initialState = {contents: ['Mirististica', 'Vet'], value: '', works: []};

export default function reducer(state = initialState, action) {
  switch(action.type) {
    case SEARCH: {
      const {value} = action;
      const works = state.contents.filter((val) => val.includes(value));
      return {...state, value, works};
    }
    default:
      return state;
  }
}

然后在你的SearchBar:

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {search} from './actions';

class SearchBar extends Component {
  render() {
    const {search, value} = this.props;

    return (
        <input
          className="form-control"
          placeholder = "Procurar Trabalho"
          onChange={(e) => search(e.target.value)}
          value={value} />
    );
  }
} 

function mapStateToProps({works}) {
  return {value: works.value};
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({search}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);

您的WorkList组件只需要监听worksRedux存储中的更改.

import React, { Component } from 'react';
import { connect } from 'react-redux';

class WorkList extends Component {
  render() {
    const {works} = this.props;

    return (
      <table className="table table-hover">
        <thead>
          <tr>
            <th>Nome</th>
          </tr>
        </thead>
        <tbody>{works.map((work) => <tr key={work}><td>{work}</td></tr>)}</tbody>
      </table>
    );
  }
}

function mapStateToProps({works}) {
  return {
    works: works.works
  }
}

export default connect(mapStateToProps)(WorkList);