Поиск по массиву в reducer React redux

Question

Доброй ночи. Хотел реализовать поиск по массиву в редьюсере, но при каждом прохождении фильтром по массиву старые элементы удаляются и стейт мутирует. Как я могу это исправить?

Вот reducer:

const initialState = {
    arrayOfItem: [{name: 'Pesron', age: 2}, {name: 'John', age: 5}],
};

export const geoObjReducer = (state = initialState, action) => {
    switch (action.type) {
        .....
        case "SEARCH_ITEM":
            return {
                ...state,
                arrayOfItem: [...state.arrayOfItem].filter((item) =>
                    item.name.toLowerCase().includes(action.payload.toLowerCase())
                )
            };
        default:
            return state;
    }
};

Action:

export const searchGeoObj = (name) => dispatch({type: "SEARCH_ITEM", payload: name})

И сам input

<input
    type='search'
    placeholder='Поиск'
    aria-label='Search'
    onChange={(e) => searchGeoObj(e.target.value)}
/>

Как можно сохранить стейт? Чтобы при удаление текста в инпуте, стейт вернулся в исходное состояние?

Answer 1

Просто добавьте еще одно поле в стэйт, в котором будете хранить результат фильтрации

const initialState = {
    arrayOfItem: [{name: 'Pesron', age: 2}, {name: 'John', age: 5}],
    filteredItems: [],
};

export const geoObjReducer = (state = initialState, action) => {
    switch (action.type) {
        .....
        case "SEARCH_ITEM":
            return {
                ...state,
                filteredItems : [...state.arrayOfItem].filter((item) =>
                    item.name.toLowerCase().includes(action.payload.toLowerCase())
                )
            };
        default:
            return state;
    }
};

БЛОГ НА HUSL

Поиск по массиву в reducer React redux

Ответы (1 шт):