在React组件中本地操作redux状态的最佳实践

Question

我想知道在操作从redux存储区馈送到组件的数据时，最佳做法是什么。如果我需要合并来自两个不同还原器的数据，或者需要进一步净化一些数据。

想象一下，我有一个来自我的redux状态的名称列表，如下所示：

names =  [{ id: 1, name: 'name1' },
{ id: 2, name: 'name2' },
{ id: 3, name: 'name3' },
{ id: 4, name: 'name4' },
{ id: 5, name: 'name5' },]

还有一份来自我所在州另一部分的属性列表。

attributes =  [{ id: 1, atrib: 'atrib1' },
{ id: 2, atrib: 'atrib2' },
{ id: 3, atrib: 'atrib3' },
{ id: 4, atrib: 'atrib4' },
{ id: 5, atrib: 'atrib5' },]

在这种情况下，我需要合并这两个结果：

namesAndAttributes =  [{ id: 1, name: 'name1', atrib: 'atrib1' },
{ id: 2, name: 'name2', atrib: 'atrib2' },
{ id: 3, name: 'name3', atrib: 'atrib3' },
{ id: 4, name: 'name4', atrib: 'atrib4' },
{ id: 5, name : 'name5', atrib: 'atrib5' },]

想象一下，这是一个很长的数据列表，所以我不想用.map()将此合并操作硬编码到组件根中的变量中，这样它就不会在每次渲染时重新计算。

我是否应该创建另一个本地状态并使用[names, attributes]作为依赖项的useEffect挂钩？或者我应该在我的reducer状态下创建另一个字段，并在reducer中操作这些数据吗？

如果这些数据在我的应用程序的许多地方都使用过，我很乐意向我的reducer添加另一个字段和操作类型，但如果这个操作只在我应用程序的一个组件中是必要的？

这里有对还是错？谢谢

Answer 1

您可以使用与Redux配合良好的reselect库。https://github.com/reduxjs/reselect

因此，我们的想法是创建一个选择器，它将取决于您想要的状态，在您的情况下是names和attributes。只有当它们发生变化时，您才会获得新的数据，并且选择器才会执行。

在你的例子中，你会有这样的东西：

商店中的名称

names = [
{ id: 1, name: 'name1' },
{ id: 2, name: 'name2' },
{ id: 3, name: 'name3' },
{ id: 4, name: 'name4' },
{ id: 5, name: 'name5' },
];

商店中的属性

attributes = [
{ id: 1, atrib: 'atrib1' },
{ id: 2, atrib: 'atrib2' },
{ id: 3, atrib: 'atrib3' },
{ id: 4, atrib: 'atrib4' },
{ id: 5, atrib: 'atrib5' },
];

选择器

import { createSelector } from 'reselect';
const getNamesFromReducer1 = (state) => state.reducer1.names;
const getAttributesFromReducer2 = (state) => state.reducer2.attributes;
export const getNamesWithAttributes = createSelector(
[getNamesFromReducer1, getAttributesFromReducer2],
(names, attributes) => {
return names.map((name) => {
return {
...name,
...attributes.find((attribute) => attribute.id === name.id),
};
});
}
);

以及该选择器的实现

const mapStateToProps = (state) => {
return {
namesWithAttributes: getNamesWithAttributes(state)
}
}

Answer 2

使用排列运算符：

const namesAndAttributes = [{...names[0],...attributes[0]}]