Reactjs 从存储同步读取？

所以我使用Apollo作为我的应用程序的状态，到目前为止我有点吃惊，没有与

MapStateTrops

或其他类似的东西

据我所知，要在我的存储中全局访问任何数据，一旦获得数据，我需要一个查询将数据写入存储，然后在我的其他组件中进行另一个查询以获取数据

到目前为止，另一个组件已经挂载并呈现了很多内容，所以内容只是有点忽隐忽现

在Redux中，我只需将新数据添加到Reducer中的存储中，那么与mapStateToProps连接的任何东西都可以访问它

有等效的吗？还是所有的东西都需要通过异步查询？还有人觉得这是一种巨大的痛苦吗

例如，在一个组件中，我得到一些邀请数据：

   this.props.client.query({
        query: REQUEST_ACTION_DATA,
        variables: {
            id: actionData.id,
            type: actionData.type
        }
    }).then(data => {
        this.props.client.writeQuery({query: GET_ACTION_DATA, data: {
            action: {
                type: data.data.actionData.type,
                object: data.data.actionData.invitation,
                __typename: 'ActionDataPayload'
            }
        }})

        this.props.history.push('/auth/register')
    })

。。。在我的另一个组件中，我有：

componentWillMount() {
    const authToken = localStorage.getItem(AUTH_TOKEN);

    if (authToken) {
        this.props.history.push('/')
    }else{
        this.props.client.query({
            query: GET_ACTION_DATA
        }).then(data => {
            if(data.data && data.data.action && data.data.action.type == 'invite'){
                this.setState({
                    invitation: data.data.action.object
                })
            }
            console.log(data)
        })
    }
}

---

忽略这样一个事实，即为这么简单的东西编写所有这些都非常笨拙，是否有一种方法可以访问存储数据而不必等待？

react apollo的

graphql

高阶组件是redux的一个超级

connect

。它将执行以下操作：

当组件挂载时，它将尝试在Apollo缓存上执行查询。您可以将查询视为不仅从服务器选择数据，而且还从存储选择数据的工具！如果这起作用，组件几乎立即充满了存储中的

数据

，并且不会执行远程请求。如果数据在存储中不可用，则会触发远程请求以接收数据。然后将

加载

属性设置为

真

Apollo cache是一个标准化的商店，与您的redux商店非常相似。但多亏了GraphQL经过深思熟虑的局限性，规范化可以自动发生，您不必为商店的结构操心。这使得程序员完全忘记了存储、选择器和请求（除非您正在大量优化代码的性能）。欢迎来到GraphQL前端框架的声明之美！您声明所需的数据及其获取方式是完全透明的

export default graphql(gql`{ helloWorld }`)(function HelloWorld({ data }) {
  if (data.loading) {
    return <div>Loading the simple query, please stand by</div>;
  }
  return <div>Result is: {data.helloWorld}</div>;
});

导出默认图形ql（gql`{helloWorld}`）（函数helloWorld（{data}）{
if（数据加载）{
返回加载简单查询，请稍候；
}
返回结果为：{data.helloWorld}；
});

• 没有选择器，就不会发生非规范化。这是由阿波罗客户完成的！当缓存自动更新时，您将获得更新的数据，类似于Redux
• 无

  componentWillMount

  检查数据是否已存储并触发请求操作。阿波罗将进行检查并触发查询
• 没有响应数据的标准化（也由Apollo客户端为您完成）

---

如果您执行上述任何操作，则可能是错误地使用了Apollo客户端。当您想优化查询时。

很好地使用阿波罗的

高阶组件并不是您使用阿波罗的方式。你想使用
graphql
HOC（一个超级redux
connect
）或
Query
组件，除非你正在做一些非常特别的事情（我们有一个大型的生产应用程序，从不使用阿波罗
，这是一个反模式）。这是一个关于如何做一些真正特别的事情的问题，还是我应该尝试解释一下Apollo缓存是如何工作的（以及如何从中选择数据）？嘿@Herku，非常感谢你的回答。我没有做什么特别的事，真的。只是传递客户端状态。我在几个组件中使用了
compose
和graphql HOC，但它似乎只是对withApollo的更详细的使用。如果你有一秒钟的时间，了解一下差别是什么真的很有用！这是一个很好的回答，赫尔库。我想很多人会从中受益。非常感谢！