react-reduxで検索フィルタを作成しようとしました

Question

私はreact reduxで検索を作成しようとしていますが、マップデータとの動作が混乱しています。 searchaction.js

export const SEARCH = 'SEARCH' 
 
const search = (term) => { 
 
    return { 
 
     type:SEARCH, 
 
     term 
 
    } 
 
}

searchreducer.js： はそうここに私のコードです

import {SEARCH} from '../searchaction' 
 
// import {games} from './games' 
 
export const searchreducer = (state = '', action) => { 
 
    switch (action.type){ 
 
     case SEARCH: 
 
      return action.term 
 
     default: 
 
      return state; 
 
    } 
 
}

rootreducer.js

import {combineReducers} from 'redux'; 
 

 
import {games} from './reducers/games'; 
 
import {searchreducer} from './reducers/searchreducer'; 
 

 
export default combineReducers({ 
 
    games, 
 
    search:searchreducer 
 
});

0私は、APIからデータを取得していたに

gamelist.js：私は、コンポーネントのgamelist.jsとsearchreportをレンダリングしています

import React from 'react'; 
 
import PropTypes from 'prop-types'; 
 
import {Link} from 'react-router-dom'; 
 
import SearchReport from './reportsearch'; 
 
// import {deleteReports} from './actions'; 
 

 
export const GamesList = ({games, deleteReports}) => { 
 
    const emptyMessage = (
 
     <p>There are no games yet in your collection.</p> 
 
    ) 
 
    const gamesList = (
 
     
 
    <div className="row"> 
 
    
 
    <table> 
 
    <thead> 
 
    <tr> 
 
    <th>Registraton date</th> 
 
    <th>Registraton No</th> 
 
    <th>Paitient Name</th> 
 
    <th>Gender</th> 
 
    <th>Age</th> 
 
    <th>Refer By</th> 
 
    <th>Test Requested</th> 
 
    <th>Report Status</th> 
 
    <th>Total Amount</th> 
 
    <th>Receipt Amount</th> 
 
    <th>Balance Amount</th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    </thead> 
 
    
 
      {games.map((reports,i) => 
 
       <tbody key={i}>    
 
      <tr> 
 
      <td>{reports.reg_date}</td> 
 
      <td>{reports.reg_no}</td> 
 
      <td>{reports.patient_name}</td> 
 
      <td>{reports.gender}</td> 
 
      <td>{reports.age}</td> 
 
      <td>{reports.refer_by}</td> 
 
      <td>{reports.test_request}</td> 
 
      <td>{reports.report_status}</td> 
 
      <td>{reports.total_amt}</td> 
 
      <td>{reports.receipt_amt}</td> 
 
      <td>{reports.bal_amt}</td> 
 
      <td><Link to={`/games/${reports.r_id}`} id={reports.r_id} className="btn-floating btn-large blue"><i class="large material-icons">edit</i></Link></td> 
 
      <td><button className="btn-floating btn-large red" onClick={() => deleteReports(reports.r_id)} deleteReports={deleteReports}><i class="large material-icons">delete</i></button></td> 
 
      </tr>    
 
</tbody> 
 
     )}   
 
      </table> 
 
      </div> 
 
     ) 
 
      return (
 
     <div> 
 
      
 
     {games.length === 0 ? emptyMessage : gamesList} 
 
     </div> 
 
    ) 
 
} 
 

 
GamesList.propTypes = { 
 
    games: PropTypes.array.isRequired, 
 
    deleteReports: PropTypes.func.isRequired 
 
}

gamepage.js：

class GamesPage extends React.Component{ 
 
    componentDidMount(){ 
 
     this.props.fetchGames(); 
 
    } 
 

 

 
    render(){ 
 
     return (
 
      <div> 
 
       <h1>Report List</h1> 
 
       <SearchReport /> 
 
      <GamesList games={this.props.games} deleteReports={this.props.deleteReports} /> 
 
      </div> 
 

 
     ) 
 
    } 
 
} 
 

 
GamesPage.propTypes = { 
 
    games: PropTypes.array.isRequired , 
 
    fetchGames: PropTypes.func.isRequired, 
 
    deleteReports: PropTypes.func.isRequired 
 
} 
 

 

 
const mapStateToProps = (state) =>{ 
 
    return { 
 
     games:state.games 
 
    } 
 
} 
 

 
export default connect(mapStateToProps, {fetchGames, deleteReports})(GamesPage)

私のコードこの地図データが検索入力とどのように接続してフィルタリングするのか混乱しています。 ありがとうございます

Answer 1

あなたが必要なものはselectorです。だから、基本的には：

const mapStateToProps = (state) =>{ 
    return { 
     games: getSearchResults(state) 
    } 
} 

getSearchResultsだけで直接配列をフィルタリングしたり、ドキュメントに記載再選択ライブラリでそれを向上させることができます。しかし、それは実装の詳細の詳細です。ここではフィルタの例を示します：

const getSearchResults = (state) => { 
    return state.games.filter((game) => game.includes(state.search) 
}