Поиск Реакт / Redux.

Question

Я действительно новичок в Reac.js / Redux.js и javascript в целом.Я пытаюсь выучить новый язык, фактически делая это.Я пытаюсь создать простое приложение, которое позволяет вам искать продукт.Со временем я создам дополнительные функции, которые позволят пользователю добавлять и удалять элементы из списка продуктов.

Пока что я построил два контейнера: ListOfProd и Search.Все работает, за исключением того, что я не могу понять, как фильтровать список товаров на основе критериев поиска, введенных пользователем.Где было бы лучшее место для реализации фильтра?и Каков наилучший способ фильтрации массива объектов на основе критериев поиска?Пожалуйста, дайте мне знать, как я могу улучшить свой код!

Контейнер Search.js

import React, {Component} from 'react';
import {bindActionCreator} from 'redux';
import {connect} from 'react-redux';
//import scroll for search
//import Scroll from './components/Search/Scroll';
import SearchBox from '../components/Search/SearchBox';
//import action for search
import {setSearchField} from '../actions/actionSearch';
//list of prod
import ListOfProd from './ListOfProd';

const mapStateToProps = state =>{
	return{
		product: state.product,
		searchField: state.searchField
	}
}

const mapDispatchToProps = (dispatch) => {
	return{
		onSearchChange: (event) => dispatch(setSearchField(event.target.value))
	}
}

class Search extends React.Component{
	render(){
		const {searchField, onSearchChange} = this.props;
		// const filterProduct = this.props.product.filter(product =>{
		// 	return product.prod.includes(searchField);
		// })
		return(
			<div className = 'tc'>
				<SearchBox searchChange={onSearchChange}></SearchBox>
				<ListOfProd></ListOfProd>
			</div>
			)
	}
}

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



 	

Контейнер ListOfProd.js

// import Component 
// hook it up to data store
import React, {Component} from 'react';
import {bindActionCreator} from 'redux';
import {connect} from 'react-redux';
//import Search from 'Search';

class ListOfProd extends React.Component {

	createListItems(){
	
			console.log(this.props.product);
			
			return this.props.product.map((product, i) => {
			 console.log(this.props.product.prod);
			 console.log(this.props.searchField);
			return(
					<li key={i}>{product.prod} {product.price}</li>
				)
		});
		
	}

	render(){
		return(
				<ul>
					{this.createListItems()}
				</ul>
			)
	}
}

const mapStateToProps = state =>{
	return{
		product: state.searchProd.product,
		searchField: state.searchProd.searchField
	}
}

export default connect(mapStateToProps)(ListOfProd);

Действия

import {CHANGE_SEARCH_FIELD} from '../constants/constants';
export const setSearchField = (text) => ({
	type: CHANGE_SEARCH_FIELD,
	payload: text
})

Редуктор ReducerSearch.js

import {CHANGE_SEARCH_FIELD} from '../constants/constants';
import React from 'react';
const initialState = {
	searchField: '',
	product : [
		{	
			id: 1,
			prod: "prod1",
			price: "5"

		},
		{
			id:2,
			prod: "prod2",
			price: "5"
		}
	]
}

export const searchProd = (state = initialState, action={}) =>{
	console.log(action.payload);
	console.log(action.type);
	switch(action.type){
		case CHANGE_SEARCH_FIELD:{
			console.log(action.payload);
			console.log(state.product);

			return {...state, searchField: action.payload};}
		default: 
			return state;
	}
	
	}

App.js

import React, { Component } from 'react';
import SignIn from './components/SignIn/SignIn';
import Register from './components/Register/Register';
import ListOfProd from './containers/ListOfProd';
import Search from './containers/Search';

import './App.css';

class App extends Component {
  render() {

    return (
      <div className="App">
        <Search></Search>
      </div>

    );
  }
}

export default App;

Пожалуйста, дайте мне знать, если вам нужно увидеть мои компоненты.

Answer 1

В общем, лучший способ реализовать фильтрацию - это событие нажатия клавиши в вашем текстовом поле.

, но перед этим вы должны проверить свой источник данных и подумать о своей производительности, вы можетеустановите ключевое ограничение или другое ограничение.

для вашего второго вопроса, я должен сказать, что если ваш массив находится в вашем клиенте, используйте карту, чтобы иметь лучшую производительность, но вы должны получить ее с сервера, который вы можете сделатьмного вещей