Skip to content

Connect Vehicles to Filters

JP Barbosa edited this page Apr 18, 2018 · 2 revisions
Connect vehicles list to filters
nano ./src/components/VehiclesList.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
+ import _ from 'lodash';
import { fetchVehicles } from '../actions/vehicles';
import Vehicle from './Vehicle';

class VehicleList extends Component {
  componentWillMount() {
    this.props.fetchVehicles();
  }

+  componentDidUpdate(prevProps) {
+    if (prevProps.filtersValues !== this.props.filtersValues) {
+      this.props.fetchVehicles(_.pickBy(this.props.filtersValues));
+    }
+  }

  render() {
    ...
  }
}

const mapStateToProps = state => (
  {
    vehicles: state.vehicles.all,
+   filtersValues: state.filtersValues,
  }
);

...
Open the app and check if everything is fine
open http://localhost:3000/