How to filter an array by name in react redux?

• 0
  I am getting data from the random API.
  Next, I want that when entering a name in the search, it returns cards that match by name. And when the name was erased, it returned the original collection.
  
  reducer
  

  import { FETCH_USERS, SEARCH_VALUE, } from "../actions/actionTypes";
  
  export function addFetchUsers(payload){
      return {
          type: FETCH_USERS,
          payload: payload
      }
  }
  
  export function getFetchUsers() {
      return dispatch => {
          return fetch('https://randomuser.me/api/?results=10')
              .then(response => response.json())
              .then(json => {
                  dispatch(addFetchUsers(json.results))
                  return json.products;
              })
      }
  }
  
  
  export function addSearchValue(payload){
      return {
          type: SEARCH_VALUE,
          payload: payload
      }
  }

  
  
  action
  
  

  import { FETCH_USERS, SEARCH_VALUE } from "../actions/actionTypes";
  
  
  const initialState = {
      users: [],
      searchValue: '',
  }
  
  const reducerFetchUsers = (state = initialState, action) => {
  
      switch (action.type) {
  
          case FETCH_USERS:
              return {
                  ...state,
                  users: state.users.concat(action.payload)
              }
  
          case SEARCH_VALUE:
              return {
                  ...state,
                  searchValue: action.payload
              }
  
          default:
              return state;
      }
  
  };
  
  export default reducerFetchUsers;

  
  
  Well, the component in which I display the cards.
  
  

  import React, { useEffect } from 'react';
  import { useDispatch, useSelector } from 'react-redux';
  import { getFetchUsers } from '../../../redux/actions/actionFetchUsers';
  
  const UsersPosts = () => {
  
      const usersPosts = useSelector(state => state.reducerFetchUsers.users);
      const dispatch = useDispatch();
  
      useEffect(() => {
          dispatch(getFetchUsers());
      }, [dispatch]);
  
      return (
          <div className="row">
              <ul className="list">
                  {
                      usersPosts.map((user, index) => {
                          return (
                              <div className="col-lg-4" key={index}>
                                  <li className="list__item">
                                      <span>{user.name.first}</span>
                                      <span>{user.gender}</span>
                                      <span>{user.email}</span>
                                      <span>{user.location.country}</span>
                                  </li>
                              </div>
                          );
                      })
                  }
              </ul>
          </div>
      )
  }
  
  export default UsersPosts;

  JavaScript Anonymous, Jun 23, 2019

---

1 Answers
• 0

  const usersPosts = useSelector(state => {
  
      const { users, searchValue } = state.reducerFetchUsers
  
      if (!searchValue)
  
        return users
  
  
  
      return users.filter((user) => user.name.includes(searchValue))
  
    })

  Anonymous

---