从已填充的存储中获取数据

Posted 2023-02-22

【中文标题】从已填充的存储中获取数据

【英文标题】：Get data from already populated store

【发布时间】：2016-11-09 17:21:37

【问题描述】：

如何获取已填充的商店中的数据以在render 函数中使用它？

例如：

   ReactDOM.render(
     <Provider store=store>
       <Layout/>
     </Provider>,
     document.getElementById('app')
   );

这里我需要将数据从商店发送到Layout 组件，该组件已经有了数据。每次store有对应的变化，是否可以发送变化的数据？

【问题讨论】：

你有没有尝试过？首先阅读 Provider 的文档。

如果你将一个 react 组件连接到 store 中的值，当值发生更改时，该组件将自动重新渲染。见redux.js.org/docs/basics/UsageWithReact.html

我已经阅读了文档，但我仍然没有任何解决方案，现在我知道如何使用 connect() 在数据容器中获取数据，但我需要最初的数据例如，我已经从用户的表单中填充了 Layout 的数据，现在我需要将这些值传递给 Layout Container。

【参考方案1】：

提供者将 store 放在 React 组件上下文中。然后，您可以在组件定义（在本例中为布局）中使用 @connect 装饰器连接到商店并选择您需要的数据。

connect 从上下文访问 store 并订阅更改，因此每次 store 中的数据更改时，组件都会重新渲染。你不应该通过道具通过商店，这是不好的做法。当然，您可以将连接的属性传递给孩子，但不能将完整的商店传递给孩子。

您放入商店的初始数据将在您的应用第一次安装到 DOM 时呈现。此后的每次更改（用户表单提交）都会改变存储，并且您的组件将通过连接机制进行更新。

Redux 文档写得很好。我建议你仔细看看它们。还有很多关于 Redux 的免费教程，例如 egghead.io。