react-redux useSelector hook 不允许将 props 直接传递给选择器答案

【问题标题】：react-redux useSelector hook disallows passing props directly to the selectorreact-redux useSelector hook 不允许将 props 直接传递给选择器
【发布时间】：2019-11-15 16:15:38
【问题描述】：

我刚刚开始使用react-redux 中提供的新useSelector 钩子。

我总是像这样直接将道具传递给我的选择器：

mapStateToProps(state, ownProps) {
   return {
      user: userSelector(state, ownProps.userId)
   }
}

将 props 直接传递给选择器是否被视为反模式？

如果“否”，那么我如何使用useSelector 实现这一点？

如果“是”，那么实现选择器参数化的正确模式是什么？

【问题讨论】：

标签： javascript reactjs redux react-redux react-hooks

【解决方案1】：

这是在选择器中使用props 的好习惯。

选择器函数不接收 ownProps 参数。但是，可以通过闭包（参见下面的示例）或使用柯里化选择器来使用道具。

useSelector 接受带有 state 参数的函数。如果您将箭头函数传递给useSelector，您将能够访问闭包中的任何变量，包括props。

本例取自official documentation

import React from 'react'
import { useSelector } from 'react-redux'

export const TodoListItem = props => {
  const todo = useSelector(state => state.todos[props.id])
  return <div>{todo.text}</div>
}

还可以查看官方文档中的stale props 页面，了解如何避免在本地使用props 时出现一些错误。

【讨论】：

谢谢！如果选择器比简单示例更复杂，例如一个由多个其他选择器等组成的选择器。我是否必须创建一个新实例，关闭道具并将其记忆在组件的功能范围内？这几乎可以从堆栈中删除重新选择。嗯。如果您喜欢玩游戏，希望看到更真实的组合和记忆选择器示例！
您仍然可以引用更复杂的选择器（例如该回调中的重新选择组合选择器）useSelector(state => someSelector(state, {id: props.id}}