Redux Toolkit中选择器的正确使用方式是什么？为何更优？

问题背景 #

我正在学习Redux Toolkit，从React角度看，在useSelector里用内联箭头函数获取状态并做计算感觉很直观。比如这个购物车商品数量统计的组件：

function CartItemCounter({ itemId })
{
  const cart = useSelector(state => state.cart);
  const itemInCart = cart.items[itemId];
  const count = itemInCart?.count || 0;

  return <div>{itemId} - {count} nos</div>
}

但很多资料都建议在slice旁边定义选择器，还会用到createSelector这类方法。想知道正确的做法是什么，以及这种方式的优势在哪里？

回答 #

两种方式均可行，但独立记忆化选择器更适配中大型项目 #

你的内联写法完全能正常运行，在小型项目或简单场景下，直接用内联函数没什么问题。但当项目规模扩大、状态结构变复杂，或者多个组件需要复用相同状态计算逻辑时，定义独立的记忆化选择器（比如用createSelector）会是更优的实践，原因如下：

• 避免无效组件重渲染
  useSelector默认会对前后两次返回的值做浅比较。如果用内联函数每次都返回新引用（比如计算数组/对象），或者重复执行相同计算逻辑，哪怕状态没变化，组件也会触发重渲染。而createSelector会缓存计算结果，只有当它依赖的输入值（比如state.cart.items或itemId）发生变化时，才会重新计算，从而减少无效重渲染，提升性能。

  举个改造后的例子：

  // 在cart slice文件中定义
  import { createSelector } from '@reduxjs/toolkit';
  
  const selectCart = state => state.cart;
  export const selectItemCountById = createSelector(
    [selectCart, (state, itemId) => itemId],
    (cart, itemId) => cart.items[itemId]?.count || 0
  );
  
  // 组件中使用
  function CartItemCounter({ itemId })
  {
    const count = useSelector(state => selectItemCountById(state, itemId));
    return <div>{itemId} - {count} nos</div>
  }
  

  这里只有当cart.items[itemId]或itemId变化时，selectItemCountById才会重新计算，组件才会重渲染。

• 代码复用与逻辑统一
  如果多个组件都需要获取商品的购物车数量，把逻辑抽成独立选择器后，所有组件都能复用这段代码，不用重复写cart.items[itemId]?.count || 0这类逻辑。而且如果后续状态结构调整（比如把cart.items改成cart.products），只需要修改这一个选择器，所有用到它的组件都会自动更新，维护成本大幅降低。

• 实现关注点分离
  把状态的读取和计算逻辑放在slice文件中，组件只负责调用选择器拿到结果，不用关心Redux状态的具体结构。组件的职责更清晰——专注UI渲染，状态相关逻辑集中在slice层，符合单一职责原则。

总结 #

• 小型项目/简单场景：内联useSelector函数足够用，写法直观。
• 中大型项目/需要复用计算逻辑/关注性能：优先用createSelector定义独立的记忆化选择器，长期来看更易维护、性能更优。

内容的提问来源于stack exchange，提问作者sayandcode