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に設定するだけです。第2に、減速機は状態を変更しません。常に同じ配列を返します。

これらの行に何かがあります。

あなたの行動のファイルは次のようになります。

export const SEARCH = 'SEARCH'; 

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

次に、あなたの減速は、次のようになります。

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成分を単にRedux storのworksへの変更をリッスンする必要がありますe。

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