redux React/还原:过滤进入应用程序的内容的机制是什么?

carvr3hs  于 2022-11-12  发布在  React
关注(0)|答案(1)|浏览(141)

我对React和Redux没有经验,所以如果这太琐碎的话,我很抱歉,但是我自己找不到答案。
我有一个使用Redux 8和React Router DOM 6的React 17应用程序。简而言之,我需要创建一个过滤器,在每次有新请求进入应用程序时执行该过滤器。它必须读取查询字符串参数并将其传递给切片。如果查询字符串参数不存在,应用程序将正常执行。
在React / Redux中,正确的实现方式是什么?例如,我已经有了一个中间件,它为一个特定的操作执行一些逻辑,显然它是为每个请求执行的。我是否应该创建另一个中间件,读取查询参数并将其传递给切片?这不会增加太多的开销吗?
谢谢你

rbpvctlc

rbpvctlc1#

一般React规则***不***存储***派生状态***。筛选的结果是可以从Redux存储中存储的状态***和***查询参数值派生的“状态”。获取这两条信息并在UI中“合并”它们以派生要呈现的数据或“状态”。
我建议使用react-router-dom中的useSearchParams钩子来访问queryString参数,使用react-redux中的useSelector钩子来选择要过滤的状态切片,并在UI中处理过滤。
示例:

import { ..., useSearchParams, ... } from 'react-router-dom';
import { ..., useSelector, ... } from 'react-redux';
...

...

const [searchParams] = useSearchParams();
const theStateSlice = useSelector(state => state.path.to.slice);

const filterValue = searchParams.get("filterValue");

const filteredState = theStateSlice.filter(el => {
  if (filterValue) {
    return /* filter condition */;
  }
  return true; // don't filter state
});

如有必要,您可以记忆过滤结果。

const filteredState = React.useMemo(() => {
  return theStateSlice.filter(el => {
    if (filterValue) {
      return /* filter condition */;
    }
    return true; // don' filter state
  })
}, [theStateSlice, filterValue]);

相关问题