Add a selector using reselect in redux

Question

I created an application what filters data according to user input.

// ui component
import React from 'react';
import { useDispatch, useSelector } from "react-redux";
import { searchPersonAction } from "../store/actions/search";

const Search = () => {
    const dispatch = useDispatch();
    const selector = useSelector(s => s.search);
    const search = (e) => {
        const txt = e.target.value;
        dispatch(searchPersonAction(txt));
    };
    return (
        <div>
            <input onChange={search} placeholder="search"/>
            <ul>
                {
                    selector.name.map(p => <li key={p.name}>{p.name}</li>)
                }
            </ul>
        </div>
    );
};

export default Search;

// action
import { SEARCH } from './actionTypes';
import { persons } from "../../mock__data";

export const searchPersonAction = (person) => {
    const personSearched = persons.filter(p => p.name.toLowerCase().includes(person.toLowerCase()));
    console.log(personSearched);
    return {
        type: SEARCH.SEARCH_PERSON,
        payload: personSearched,
    }
};


//reducer

import { SEARCH } from '../actions/actionTypes';
import { persons } from "../../mock__data";

const initialState = {
    name:persons
};

export const search = (state = initialState, { type, payload }) => {
    switch (type) {
        case SEARCH.SEARCH_PERSON:
            return {
                ...state,
               name: payload
            };
        default:
            return state;
    }
};

Above I filter using: const personSearched = persons.filter(p => p.name.toLowerCase().includes(person.toLowerCase())); and I get on ui using above Search component.
Question: How to use reselect library in my example?

score 0 · Answer 1 · answered Aug 17 '20 at 13:51

0

The examples in the Reselect documentation will get you there. The filtering you mentioned would become your reselector:

import { createSelector } from 'reselect'
import { persons } from "../../mock__data";

const nameSelector = state => state.name;

export const searchedPersonsSelector = createSelector(
  nameSelector,
  name => persons.filter(p => p.name.toLowerCase().includes(name.toLowerCase()));
);

inside your component you can import the selector and use the useSelector hook as you are already doing:

import { searchedPersonsSelector } from "./selectors";

const Persons = () => {
  const searchedPersons = useSelector(searchedPersonsSelector);
  return (
    ...
  );
};

answered Aug 17 '20 at 13:51

Ross Allen

43,772
14
97
95

1

should I change the action? – Asking Aug 17 '20 at 14:09
1

what should i dispatch in this way? Because i have to pass something back in action – Asking Aug 17 '20 at 14:19
1

also, which canges should i add in my reducer? – Asking Aug 17 '20 at 14:32
It doesn't look like the action needs to change? You're storing `name` in the store, which is the value being searched for. The action and the reducer stay the same; selectors are optimizations on selecting data from your store. – Ross Allen Aug 17 '20 at 18:30
could you show how should all the code look, please? – Asking Aug 17 '20 at 18:37
i created a question with sanbox, could you take a look please, https://stackoverflow.com/questions/63467967/integrate-reselect-in-redux – Asking Aug 18 '20 at 11:51
could you please take a look https://stackoverflow.com/questions/63482413/save-data-in-a-specific-way – Asking Aug 19 '20 at 08:42

Add a selector using reselect in redux

1 Answers1