Javascript React/Redux使用选择器选择筛选和排序

我有一个项目列表，我希望用户能够按属性进行排序和筛选。我认为使用选择器是实现这一点的最有效方法，尽管我不确定具体如何实现？理想情况下，我希望用户从列表上方的下拉列表中选择一个属性，然后在文本字段中输入属性的实际值，该文本字段将触发使用这两个参数的筛选选择器。例如，在汽车列表中，用户希望按“制造”进行过滤，因此他们从诸如“制造”、“型号”、“年份”等其他属性的列表中选择“制造”，然后在旁边键入“日产”，然后他们得到一个仅由日产制造的汽车列表

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchItems } from "../../actions/items";

const ItemList = ({ match }) => {
  const items = useSelector((state) => state.items);
  
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchItems());
  }, [dispatch]);

  const renderedList =
    Object.values(items).length > 0
      ? Object.values(items)
          .map((item) => {
           
            return (
              <ListItem key={item.id}>
                <ItemCard item={item} handleClick={handleClick} />
              </ListItem>
            );
          })
      : null;

  return (
    <Grid container direction="row" className={classes.cardGrid}>
      <Grid item lg={4} className={classes.list}>
       
        <Typography variant="h4" className={classes.title}>
          Items
        </Typography>
        <List dense>{renderedList}</List>
      </Grid>
    </Grid>
  );
};

export default ItemList; 

import React，{useffect}来自“React”；
从“react-redux”导入{useSelector，useDispatch}；
从“../../actions/items”导入{fetchItems}；
常量项列表=（{match}）=>{
const items=useSelector（（state）=>state.items）；
const dispatch=usedpatch（）；
useffect（（）=>{
分派（fetchItems（））；
}，[发送]；
常量渲染列表=
对象。值（项）。长度>0
？对象值（项目）
.map（（项目）=>{
返回(
);
})
：null；
返回(
项目
{renderedList}
);
};
导出默认项目列表；

将过滤器属性和值保持在Redux状态，然后在选择器中应用过滤

//selectors.js
常量getFilterAttribute=state=>state.filterAttribute；
常量getFilterValue=state=>state.filterValue；
const getFilteredItems=状态=>{
常量filterAttribute=getFilterAttribute（状态）；
常量filterValue=getFilterValue（状态）；
const items=getItems（state）；
如果（！filterAttribute | |！filterValue）{
退货项目；
}
//按您需要的方式应用过滤器
返回对象.values（items）.filter（…）
}

这有助于将状态选择逻辑与表示逻辑分开。现在，您的组件只需调用选择器：

//ItemList.js
const ItemList=（道具）=>{
常量项=使用选择器（getFilteredItems）；
const renderedList=items.map（item=>…）
返回(
...
)
}

编辑：

过滤器组件可能看起来像：

const FilterControl = () => {
  const dispatch = useDispatch();
  const [attribute, setAttribute] = useState('');
  const [value, setValue] = useState('');

  const onSubmit = () => {
    dispatch({ type: 'SET_FILTER', attribute, value });
  }

  return (
    <div>
      <label>Attribute</label>
      <input value={attribute} onChange={e => setAttribute(e.target.value)} />

      <label>Value</label>
      <input value={value} onChange={e => setValue(e.target.value)} />
      
      <button onClick={onSubmit}>Filter</button>
    </div>
  )
}

const FilterControl=（）=>{
const dispatch=usedpatch（）；
const[attribute，setAttribute]=useState（“”）；
const[value，setValue]=使用状态（“”）；
const onSubmit=（）=>{
分派（{type:'SET_FILTER'，属性，值}）；
}
返回(
属性
setAttribute（e.target.value）}/>
价值
setValue（e.target.value）}/>
滤器
)
}

Wow这太好了，但我不知道如何将属性和值放在第一位。我会在我的列表组件中执行类似于

const[filterAttribute，setFilterAttribute]=useState（“”）的操作吗？然后，在选择属性或键入值时，让set钩子运行onChange？是的，听起来不错。把这些东西放到它自己的组件中可能会有所帮助。我在文章中添加了更多的示例代码供参考。哈哈，男孩，现在我更困惑了。我为什么要采取行动？我以为我是用这种模式来避免这些。抱歉，我说的太多了。我可能还没完全弄清楚。将过滤器设置存储在Redux状态。要更改这些值，必须分派一个操作。相反，如果要将过滤器设置存储在本地组件状态，那么方法看起来会有点不同。因此，将过滤器设置存储在redux状态是否更好？我猜是的