title: React/ Redux select filtering and sorting using selectors
body: <p>I have a list of items that I would like the user to be able to sort and filter by attribute. I figure using selectors is the most efficient way to do this, though I am not sure exactly how? Ideally, I would like the user to select an attribute from a dropdown above the list, then enter the actual value of the attribute into a text field which would trigger a filtering selector using both of those params. For example in a list of cars, the user wants to filter by &quot;make&quot; so they choose &quot;make&quot; from a list of other attributes like &quot;make&quot;, &quot;model&quot;, &quot;year&quot; etc. and then next to that they could type in &quot;Nissan&quot; and then they get a list of just cars made by Nissan.</p>
  <pre><code>import React, { useEffect } from &quot;react&quot;;
  import { useSelector, useDispatch } from &quot;react-redux&quot;;
  import { fetchItems } from &quot;../../actions/items&quot;;
  
  const ItemList = ({ match }) =&gt; {
    const items = useSelector((state) =&gt; state.items);
    
    const dispatch = useDispatch();
  
    useEffect(() =&gt; {
      dispatch(fetchItems());
    }, [dispatch]);
  
    const renderedList =
      Object.values(items).length &gt; 0
        ? Object.values(items)
            .map((item) =&gt; {
             
              return (
                &lt;ListItem key={item.id}&gt;
                  &lt;ItemCard item={item} handleClick={handleClick} /&gt;
                &lt;/ListItem&gt;
              );
            })
        : null;
  
    return (
      &lt;Grid container direction=&quot;row&quot; className={classes.cardGrid}&gt;
        &lt;Grid item lg={4} className={classes.list}&gt;
         
          &lt;Typography variant=&quot;h4&quot; className={classes.title}&gt;
            Items
          &lt;/Typography&gt;
          &lt;List dense&gt;{renderedList}&lt;/List&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    );
  };
  
  export default ItemList; 
  </code></pre>