How do I implement filter in React with redux and reset data without making fresh API call?

Question

on load, the API will give all the cities [let's say 20 cities], which I will be storing in redux. Now, the user can filter them [checkbox or radio button] based on city properties (eg: based on country, continent, language, etc). My question is, once a filter is applied, only those matching the criteria will be displayed [say from 20 cities, only 3 are shown]. Now when the filter is removed, I want to show all the 20 cities without making API call again . How should I solve this?

Also how do I apply multiple filters? Users can select a country: USA and language: English and income: high, and once a filter is removed, the results should be automatically changed.

Here is a sample of a city object:

{
  name:"New York",
  country:"USA",
  continent:"North America",
  population:"large",
  language:["english","spanish"],
  income:"high",
  industries:["IT","law","manufacturing"],
  }

Answer 1

The most common recommendation would be to never change your state, but to do the filtering in your selector, when pulling your data out of the state and into your component.

The concept is called derived data (docs page) and depending on how much work is done for filtering, it might make sense to use memoized selectors for this. But if you really only have <100 elements to filter on, that should not be necessary.