javascript - 尝试在react-redux中构建搜索过滤器

Question

我正在尝试使用 React Redux 创建搜索，但我很困惑它如何与 map 数据一起工作。所以这是我的代码:搜索 Action .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
});

gamelist.js，我在其中从 api 获取数据:

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，我在其中渲染组件 gamelist.js 和 searchreport:

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)

这就是我的代码，我很困惑此 map 数据如何与搜索输入连接并过滤它。提前致谢

Answer 1

您需要的是selector 。所以基本上:

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

getSearchResults 可以直接过滤数组或使用文档中提到的重新选择库来增强它。但这更多的是一个实现细节。这是一个过滤器的示例:

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