在 redux 中集成 reselect

IT技术 reactjs
2021-04-29 16:14:52

我有一个简单的搜索应用程序,根据用户输入,它在前端获得结果。
我的还原代码:

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

界面组件:

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;

现在应用程序正常运行,但我想集成到我的应用程序reselect库中。我想在过滤器逻辑中使用重新选择。
问题:我应该在我的应用程序代码中添加哪些更改?
演示:https : //codesandbox.io/s/brave-monad-litc1?file=/ src/Search.js: 0-577

1个回答

你可以用该功能useSelectorcreateSelector来自reselect这将memoise选择值。你可以这样做:

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;

更多示例,您可以在此处查看官方文档