如何创建一个helper方法，该方法使用param从redux存储中过滤数据？

在我的react/redux/redux-thunk应用程序中，我有一个reducer来管理状态，其中包含一个类似以下内容的列表：

state = {
  stuff: [
    {
      id: 1,
      color: "blue",
      shape: "square"
    },
    {
      id: 2,
      color: "red",
      shape: "circle"
    },
    {
      id: 3,
      color: "yellow",
      shape: "square"
    },
  ]
};

我想创建一个助手函数，我可以在我的应用程序中使用它，根据传入该函数的参数，返回商店中经过过滤的物品列表。例如：

getStuffByShape("square");  // returns array with stuff 1 and 3
getStuffByColor("red"); // returns array with stuff 2

我已经读到，我可以创建一个单件存储，我可以根据需要导入到不同的文件中，但不建议这样做。我现在不做任何服务器端渲染，但我不想限制将来的选择

我读过关于创建选择器和重新选择

包的内容，但示例仅显示了使用状态参数的函数，我不清楚是否可以传入其他任意参数

我可以将状态作为连接组件的参数传递，但我可能希望在其他位置使用这些函数，例如其他帮助器函数。
您可以创建一个，我首选的方法是一个可以记忆的常用方法：


const{Provider，useSelector}=ReactRedux；
const{createStore，applyMiddleware，compose}=Redux；
const{createSelector}=重新选择；
常量初始状态={
材料：[
{
id:1，
颜色：“蓝色”，
形状：'正方形'，
},
{
id:2，
颜色：“红色”，
形状：“圆”，
},
{
id:3，
颜色：'黄色'，
形状：'正方形'，
},
],
};
const reducer=（state）=>state；
//助手
常量createFilterBy=（字段，值）=>（项）=>
价值项目[字段]==值：真；
//选择器
const selectStuff=（state）=>state.stuff；
常量createSelectFiltered=（filterFn）=>
createSelector（[selectStuff]，（stuff）=>
stuff.filter（filterFn）
);
const createSelectByColor=（颜色）=>
创建选择器(
[createSelectFiltered（CreateSelecterby（'color'，color））]，
（x） =>x
);
const createSelectByShape=（形状）=>
创建选择器(
[createSelectFiltered（CreateSelecterby（'shape'，shape））]，
（x） =>x
);
//使用redux开发工具创建存储
康斯特康塞恩汉斯酒店=
窗口。uuu REDUX_vtools_uextension_uuucompose_uu124; COMPOSE；
const store=createStore(
减速器，
初始状态，
复合致癌物(
applyMiddleware（（）=>（下一步）=>（操作）=>
下一步（行动）
)
)
);
const List=React.memo（函数列表（{items}）{
返回(

{items.map（（项，索引）=>(
{JSON.stringify（item）}
))}

);
});
const SelectList=React.memo（函数SelectList({
标签，
价值
塞特，
选项，
}) {
返回(
{label}
setter（值=='all'？未定义：值）
}
>
全部的
{options.map（（option）=>(
{option}
))}
);
});
常量颜色=[‘蓝色’、‘红色’、‘黄色’]；
常量形状=['正方形'，'圆形']；
常量应用=（）=>{
const[color，setColor]=React.useState（）；
const[shape，setShape]=React.useState（）；
const selectByColor=React.useMoom(
（）=>createSelectByColor（颜色），
[颜色]
);
const selectByShape=React.useMoom(
（）=>createSelectByShape（形状），
[形状]
);
const byColor=使用选择器（selectByColor）；
const byShape=使用选择器（selectByShape）；
返回(
颜色
形状
);
};
ReactDOM.render(
,
document.getElementById（'root'））
);

感谢您抽出时间发布此答案！这很有帮助，但是，我想确保我了解接线。您的示例中的
createSelectByColor
类似于
getStuffByColor（“红色”）在我原来的帖子中，对吗？无论我在哪里导入它，我都必须将它包装在
useSelector（）
中才能传递状态？而且，
selectByColor
只是使用记忆的中间步骤，还是以某种方式传递状态信息也很重要？@HectorO
getStuffByColor（“红色”）是
createSelectByColor（）（'red'）
，但是
createSelectByColor（）
在usemo中，因此组件有自己的选择器。解释了它是如何工作的以及为什么以这种方式进行。