javascript - 在 redux 中使用 reselect 添加选择器

Question

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

// 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我的例子中的图书馆？

Answer 1

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