Integrate reselect in redux - reactjs

Question

I have a simple search aplication, where depending by user input, it get the result on front end.
My redux code:
import { persons } from "./persons";
import { createStore } from "redux";
//contant
export const SEARCH = {
SEARCH_PERSON: "SEARCH_PERSON"
};
//action
export const searchPersonAction = (person) => {
const personSearched = persons.filter((p) =>
p.name.toLowerCase().includes(person.toLowerCase())
);
return {
type: SEARCH.SEARCH_PERSON,
payload: personSearched
};
};
//reducer
const initialState = {
name: persons
};
export const search = (state = initialState, { type, payload }) => {
switch (type) {
case SEARCH.SEARCH_PERSON:
return {
...state,
name: payload
};
default:
return state;
}
};
//store
export const store = createStore(search);
UI component:
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { searchPersonAction } from "./store";
const Search = () => {
const dispatch = useDispatch();
const selector = useSelector((s) => s);
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;
Now the application works properly, but i want to integrate in my application reselect library. I want to use reselect in filter logic.
Question: Which changes should i add in my application code?
demo: https://codesandbox.io/s/brave-monad-litc1?file=/src/Search.js:0-577

Answer 1

You can wrap the function in useSelector into createSelector from reselect which will memoise the selector values. You can do it like this:
import React, { useEffect } from "react";
import { createSelector } from "reselect";
import { useDispatch, useSelector } from "react-redux";
import { searchPersonAction } from "./store";
const memoiseSelector = createSelector(
(s) => s.name,
(name) => name
);
const Search = () => {
const dispatch = useDispatch();
const name = useSelector(memoiseSelector);
const search = (e) => {
const txt = e.target.value;
dispatch(searchPersonAction(txt));
};
return (
<div>
<input onChange={search} placeholder="search" />
<ul>
{name?.map((p) => (
<li key={p.name}>{p.name}</li>
))}
</ul>
</div>
);
};
export default Search;
Further more examples you can check here on official docs.