показать результат фильтрации на странице результатов поиска

Question

Основная функциональность моего приложения - это окно поиска на главной странице. Пользователь заполняет форму и, когда отправляет, пользователь направляется на страницу результатов, где результат поиска будет показан вместе с параметром фильтрации. Теперь, когда пользователь использует параметр фильтрации и устанавливает ценовой диапазон в 10 евро минимум и максимум 20 евро, пользователь должен увидеть результат, который находится между (10 и 20) евро вместо всех результатов.

Что я сделал, я показал результат, который пользователь выполнил. Также я написал логику для фильтрации, но теперь пуст о том, как обновить результат с помощью отфильтрованного результата.

логики для фильтрации будет выглядеть следующим образом (его просто псевдокод для показа моей идеи)

function carFilterFromPrice(price) { 
    return cars.filter(function (car) { 
    return car.price > price.min && car.price < price.max; 
    }); 
} 

this.props.carFilterFromPrice(price); 

машино-result.js (родительский компонент для страницы результатов)

class ResultLayout extends Component { 
    render() { 
    const { Origen, Destino, daterange } = this.props.carValues; 
    const { carResult } = this.props; 
    return (
     <div className="container-fluid"> 
     <CarResultFilter 
      origen={Origen} 
      destino={Destino} 
      daterange={daterange} 
     /> 
     <CarResult 
      origen={Origen} 
      destino={Destino} 
     /> 
     </div> 
    ); 
    } 
} 

const mapStateToProps = state => { 
    console.log('state', state); 
    const carValues = selector(state, 'Origen', 'Destino', 'daterange'); 
    return { 
     carValues, 
     carResult: state.getCarResult 
    }; 
    }; 

car-result-filter.js (опция фильтрации - простой входной рейнджер)

class CarResultFilter extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     prices: { min: 0, max: 100 }, 
    }; 
    } 

    handleValuesChange(component, values1) { 
    this.setState({ prices }); 
    this.props.carFilterFromPrice(this.state.prices); 
    } 

    render() { 
    const { origen, daterange } = this.props; 
    return (
     <div className="car-result-filter"> 
     <div className="container-fluid"> 
      <div className="row"> 
      <div className="col-xs-12 col-sm-12 col-md-3"> 
       <InputRange 
       maxValue={100} 
       minValue={0} 
       value={this.state.prices} 
       onChange={this.handleValuesChange.bind(this)} 
       /> 
      </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

машино-result.js (это я хочу обновить, если фильтруется)

function renderCarList(cars, cityOrigen, cityDestino) { 
    if (cars.length > 0) { 
    return _.map(cars, (car) => (
     <CarResultList 
     key={car.provider_id} 
     car={car} 
     cityOrigen={cityOrigen} 
     cityDestino={cityDestino} 
     /> 
    )); 
    } 
    return <p> No Car to show </p>; 
} 

const CarResultList = ({ car, cityOrigen, cityDestino }) => 
    <div className="car-result-list"> 
     <Row className="show-grid" style={{ marginTop: 10, marginBottom: 10 }}> 
     <Col xs={12} sm={12} md={6}> 
      <img 
      src={car.photo ? car.photo : CarImage} 
      className="img-responsive car-img" 
      style={{ width: 200, height: 200 }} 
      alt={car.provider} 
      /> 
     </Col> 
     <Col xs={12} sm={12} md={6}> 
      <h3>{car.car}</h3> 
      <p className="sub">{cityOrigen}-{cityDestino}</p> 
     </Col> 
     </Row> 
    </div>; 

class CarResult extends Component { 
    render() { 
    const { carResult, origen, destino } = this.props; 
    const carResultList = renderCarList(carResult.cars, cityOrigen, cityDestino); 
    if (!carResult.fetching) { 
    return (
     <div> 
     Hemos encontrado {carResultList.length} ofertas para ti. 
     <div className="car-result-container"> 
      <Grid> 
        {carResultList} 
      </Grid> 
     </div> 
     </div> 
    ); 
    } 
    return (
    <div>wait we are loading content for you....</div> 
); 
    } 
} 

Как я обновить страницу результатов с новыми отфильтрованных значений, предоставляемых в качестве компонента CarResult имеет автомобили значения из действия (showResultofCar) пользователя, представляющего форму и извлекая это значение из редуктора (getCarResult)?

UPDATE

const initialState = { 
    fetching: false, 
    fetched: true, 
    cars: [], 
    error: null 
}; 

export function getCarResult(state = initialState, action) { 
    switch (action.type) { 
    case 'CAR_FETCH_START': 
     return { ...state, fetching: true }; 
    case 'CAR_FETCH_SUCCESS': 
     return { ...state, fetched: true, fetching: false, cars: action.payload }; 
    case 'CAR_FETCH_FAILURE': 
     return { ...state, error: action.payload }; 
    default: 
     return state; 
    } 
} 

Answer 1

Так что ваш редуктор должен иметь процессор другого действия, чтобы дать фильтрованный результат.

Я использую глобальное состояние для cars, которое увлажняется CARS_FETCH_SUCCESS. и он используется далее для фильтрации автомобилей в соответствии с price.

Создайте у вас есть действие для фильтрации сказать, как следующая

function getFilteredResults(price){ 
    return(dispatch, getState){ 
    return dispatch(
     type: "CARS_FETCH_WITH_FILTERS", 
     payload: price //price from container 
    ) 
    } 
} 

Вот это пример реализации пойти с

let cars = []; 
const initialState = { 
    fetching: false, 
    fetched: true, 
    cars: [], 
    error: null 
}; 

function carFilterFromPrice(price) { 
    return cars.filter(function (car) { //users global cars object to filter 
    return car.price > price.min && car.price < price.max; 
    }); 
} 

export function getCarResult(state = initialState, action) { 
    switch (action.type) { 
    case 'CAR_FETCH_START': 
     return { ...state, fetching: true }; 
    case 'CAR_FETCH_SUCCESS': 
     cars = action.payload; //storing all cars in global state to reuse them for filtering 
     return { ...state, fetched: true, fetching: false, cars: action.payload }; 
    case 'CAR_FETCH_WITH_FILTERS': //you filter action 
     return { ...state, filtered: true, cars: carFilterFromPrice(action.payload.price) }; //send price in payload to filter 
    case 'CAR_FETCH_FAILURE': 
     return { ...state, error: action.payload }; 
    default: 
     return state; 
    } 
}