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

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!