按需从redux store获取数据（通过点击）

Question

我希望在按钮点击（或其他事件）时从存储中获取数据，而不是在组件渲染时获取数据。

想象一种情况，有一个 BooksList 组件，它呈现了多个 BookItem 组件。一个单独的 BookItem 组件有一个按钮，点击该按钮会触发以下代码中的 handleExportClick 函数：

const BookItem = ({ book }) => {
  const highlights = useSelector((state) => 
      state.highlights.filter(q => q[1].book === book.title)
    )
  
  const handleExportClick = () => {
    bookExport(highlights)
  }

  return (
    <Button onClick={handleExportClick}>Export</Button>
  )

这个解决方案可行，但有一个主要缺陷。变量 highlights 在每个组件（即每个 BookItem）中都被计算。这不是最优的，因为数据仅在用户点击导出按钮时才需要。

我尝试通过将 useSelector 移动到 handleExportClick 中来解决这个问题，但这并不起作用。

const BookItem = ({ book }) => {
  const handleExportClick = () => {
    const highlights = useSelector((state) => 
      state.highlights.filter(q => q[1].book === book.title)
    )
    
    bookExport(highlights)
  }

  return (
    <Button onClick={handleExportClick}>Export</Button>
  )
}

这会出现错误：无效的hook调用。Hooks只能在函数组件的主体内调用。可能是以下原因之一导致了这种情况：

1. 您可能拥有React和渲染器（例如React DOM）不匹配的版本
2. 您可能正在违反Hooks规则
3. 您可能在同一个应用程序中有多个React副本，请参阅https://reactjs.org/link/invalid-hook-call以获取有关如何调试和解决此问题的提示。

这是可以理解的。

目前从存储库获取数据但仅按需获取的模式是什么？

---

解决方案

使用useStore hook直接访问存储库。

import { useStore } from 'react-redux'

const BookItem = ({ book }) => {
  const store = useStore()
  
  const handleExportClick = () => {
    const highlights = store.getSate().highlights.filter(q => q[1].book === book.title)
    bookExport(highlights)
  }

  return (
    <Button onClick={handleExportClick}>Export</Button>
  )
}

- karlosos

Answer 1

您可以使用 useStore 将store实例注入到此组件中，需要时使用 store.getState()。

- Aitwar

Answer 2

你需要向组件注入 store。
下次请使用搜索选项 https://react-redux.js.org/using-react-redux/accessing-store

我正在关闭此线程。

- Alan Kałuża