无法在事件处理程序中找到使用 redux-toolkit 中的 Selector 并将参数传递给它的方法

Question

有一个用于单击的事件处理程序，当它触发时，我想使用选择器从 redux 中提取特定数据，其中实现了所有逻辑多对多。我需要将 id 传递给它才能接收其个人数据。根据 React 的规则，可以在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用钩子。

那么有什么方法可以解决我的问题呢？

const handleMediaItemClick = (media: any): void => {
    // For example i check media type and use this selector to pull redux data by id
    const data = useSelector(playlistWithMediaSelector(imedia.id));
};

Answer 1

您可能应该使用本地状态值来跟踪它。

const Component = () => {
  const [imediaId, setImediaId] = useState(null);

  const data = useSelector(playlistWithMediaSelector(imediaId));

  function handleMediaClick(id) {
    setImediaId(id)
  }

  useEffect(() => {
    // do something on data
  }, [imediaId, data])

  return <div>...</div>
}

这有帮助吗？

编辑：我认为您想要做的是能够在需要的地方调用选择器。类似于（考虑上面的代码）

data(id)

in

handleMediaClick

。我敢打赌你必须从

useSelector

返回一个柯里化函数，而不是值。然后你会调用它。唉，我还没弄清楚如何做到这一点，是否可能，以及它是否是可接受的模式。

Answer 2

如错误消息中所述，您不能在函数内调用钩子。您在功能组件内调用钩子并在函数内使用该值。每次状态更改并呈现该组件时，

useSelector

钩子都会更新变量。

另外，当你使用

useSelector

获取数据时，你应该从redux状态写下你需要的reducer名称。

 const CustomComponent = () => {
      // The data will be updated on each state change and the component will be rendered
      const data = useSelector((state) => state.REDUCER_NAME);

      const handleMediaItemClick = () => {
          console.log(data);
      };
 }

您可以查看此页面以获取更多信息。https://react-redux.js.org/api/hooks#useselector

Answer 3

使用 redux-thunk 或

useStore()

。

useStore()

方法：

const { getState } = useStore();

const handleMediaItemClick = (media: any): void => {
    const state = getState();
    const state = playlistWithMediaSelector(imedia.id)(state);
};

内联重击方法：

const handleMediaItemClick = (media: any): void => {
    const data = dispatch((dispatch, getState) => {
        const state = getState();
        return playlistWithMediaSelector(imedia.id)(state);
    });
};

我建议检查一下：https://redux.js.org/usage/writing-logic-thunks。