在Redux中使用重新选择添加选择器

问题描述

我创建了一个应用程序，可以根据用户输入过滤数据。

// 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;
    }
};

以上，我使用const personSearched = persons.filter(p => p.name.toLowerCase().includes(person.toLowerCase())); 进行过滤，并使用上述Search组件进入了ui。
问：在我的示例中如何使用reselect库？

解决方法

Reselect documentation中的示例将带您到达那里。您提到的过滤将成为您的重新选择器：

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()));
);

在组件内部，您可以导入选择器并像已经做的那样使用useSelector钩子：

import { searchedPersonsSelector } from "./selectors";

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