CODEWITHSUNDEEP
arraysecmascript-6reduxfilteringreact-redux
Paul
Paul

Reputation: 151

Redux filter array return new state

Hi i'm hoping this is a syntax thing... I have a search box, it passes it's value up to a reducer which i'd like to use to filter some data and return as a new state but with only the cities in the array that contain from the search value.

  case 'FILTER_LOCATIONS' :
    const data = action.serverData
      .filter(cityName => {
        return cityName.city.toLowerCase().indexOf(action.event) >= 0
      });
      console.log(data);

    return state;

data returns the filtered array but how do i update my state?

**update

Apologies, a bit of a noob.

serverData is on the root of tree and looks a bit like this:

serverData [{
  "id": 1,
  "full_name": "Eric Myers",
  "city": "Sydney",
  "lat": "-33.8678",
  "lng": "151.2073",
  "country": "Australia"
}, {
  "id": 2,
  "full_name": "Ruth Torres",
  "city": "Simpang",
  "lat": "-7.1406",
  "lng": "107.0033",
  "country": "Indonesia"
}, {
  "id": 3,
  "full_name": "Kevin Collins",
  "city": "Herrljunga",
  "lat": "58.0774",
  "lng": "13.0266",
  "country": "Sweden"
}]

Upvotes: 0

Views: 938

Answers (1)

Jordan Running
Jordan Running

Reputation: 106037

You haven't told us where in your state tree this data is supposed to go, but supposing you want to set a property named filteredLocations, you would do something like this:

case 'FILTER_LOCATIONS' :
  const data = action.serverData
    .filter(cityName => cityName.city.toLowerCase().indexOf(action.event) >= 0);

  return Object.assign({}, state, { filteredLocations: data });

If you're using Babel and have object spread (stage-3) and shorthand properties (es2015) enabled in your presets, you can make this more concise:

case 'FILTER_LOCATIONS' :
  const filteredLocations = action.serverData
    .filter(cityName => cityName.city.toLowerCase().indexOf(action.event) >= 0);

  return { ...state, filteredLocations };

Upvotes: 1

Related Questions