关于使用 Redux 工具包的 `useSelector` 和 `createSelector` 的混淆

Posted 2023-02-22

【中文标题】关于使用 Redux 工具包的 `useSelector` 和 `createSelector` 的混淆

【英文标题】：confusion about `useSelector` and `createSelector` with Redux toolkit

【发布时间】：2020-12-09 02:28:36

【问题描述】：

我是 Redux 和 Redux 工具包的新手。我了解到createSelector 可以接受多个输入选择器，它们可以作为单独的参数或数组提供。所有输入选择器的结果都作为单独的参数提供给输出选择器。

const selectA = state => state.a;
const selectB = state => state.b;
const selectC = state => state.c;

const selectABC = createSelector(
    [selectA, selectB, selectC],
    (a, b, c) => 
        // do something with a, b, and c, and return a result
        return a + b + c;
    
);

我的问题是，如果我只关心一个简单的状态，我可以像这样使用useSelector

const selectA = state => state.a;

const a = useSelector(selectA)

这两种用法有什么区别？

【参考方案1】：

“选择器”是任何接受 Redux 状态树作为参数并返回一些提取或派生数据的函数。这包括像你展示的普通函数。

在许多情况下，您希望记住结果的计算，例如映射到一组项目，以便除非输入发生变化，否则不会重新计算。 Reselect 的 createSelector 创建了记忆选择器函数，只有在输入发生变化时才会重新计算输出。

更多详情请看我的帖子Using Reselect Selectors for Encapsulation and Performance，以及the "Performance and Normalizing Data" page in the new "Redux Essentials" core docs tutorial。

【讨论】：

感谢您的回复！实际上我想知道我们是否只是为了从状态中获取一个状态并直接返回它，我们应该只使用一个普通函数而不是createSelector，或者我们应该始终默认使用createSelector？

如果涉及实际派生状态，我建议仅使用createSelector，即state => state.items.map(item => item.id)