在react app中共享全局/单例数据

Question

我正在重写一个小应用程序,试图更好地理解React.我正在尝试确定共享"单例"数据的"正确"/最有效的方法 - 例如,在登录时已经过适当身份验证的用户.

现在,父"application"组件user在其状态中具有属性,我将其作为prop传递给子组件:

<Toolbar user={this.state.user} />
<RouteHandler user={this.state.user}/>

(我正在使用react-router).这是有效的,在像这样的只读情况下,并不可怕.但是,我的实际登录表单组件(这是一个路由,并且将在里面RouteHandler),需要一些方法来"设置"新的用户数据,所以我还需要传递一些回调:

<RouteHandler onAuthenticated={this.setUser} user={this.state.user}/>

这不是一个大问题,除了现在这个方法可用于处理的每个"路由" RouteHandler.

我一直在阅读起来,这似乎是唯一的选择是EventEmitter或Dispatch风格的系统.

有没有更好的方法让我失踪？一个事件发射器/调度器系统是值得使用的,当一个应用程序真的只有一两个用途这么小？

Answer 1

React Context提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递 props。通过上下文，嵌套在 a 下的每个组件都Provider可以访问数据，但您需要显式读取该值。

我建议将 React Hooks 与useContext结合使用。value一种方法是将上下文设置为object带有 setter 和 getter 函数的上下文。

import React, { useState, useContext } from "react"

export const UserContext = React.createContext({}); //Initialise

//Wrapper with getter and setter 
const App = () => {
    const [user, setUser] = useState();
    const value = {user, setUser}
    return (
        <div>
            <UserContext.Provider value={value}>
                <RouteHandler/>
                <AnotherComponent/>
            </UserContext>
            <ComponentWithoutAccessToUserContext/>
        </div>
    )
}

const RouteHandler = (props)=> {
   const { user, setUser } = useContext(UserContext)
   // This component now has access to read 'user' and modify it with 'setUser'


}

const AnotherComponent = () => {
   return (<div>Component which could be get access to the UserContext</div>)
}

Answer 2

对于单例 - 您只需为用户服务创建单独的模块并将其导入到您定义需要它的组件的模块中。

\n\n

其他非常相似但更强大的选项是使用 DI 容器 - 将您的 React 组件定义为 DI 容器中的一项服务，并依赖于其他服务（例如用户数据服务）。这将更适合通用（同构）应用程序 - 因为，您将能够轻松地用特定实现替换依赖项，或者当您需要为单独的范围创建单独的实例（例如用户会话服务器端）时。

\n\n

另外，如果使用这种方法，我建议将纯反应组件与逻辑分开 - 您可以创建单独的纯组件来接收所有数据，并将回调作为道具，然后在 DI 容器中创建 HoC 组件来包装它并传递所需的组件数据和回调。

\n\n

如果你需要 DI 容器 - 有很多，但我建议你看看 Angular 2 di 容器，或者如果你想要更简单的东西 - 下面我引用了我的项目，它有非常简单但强大的 DI 灵感来自 Angular 2 DI（很容易从该项目中提取 - 只需一个文件+测试））。

\n\n\n\n

关于通知组件有关更改的信息，以及组织异步逻辑 - 您仍然需要像 EventEmitter 这样的东西来通知组件有关更改的信息，并且您需要为组件编写生命周期回调来订阅/取消订阅更新 \xe2\x80\xa6 您可以这样做手动或创建 mixin 或 HoC 来缩短它。

\n\n

但从我的角度来看，有更好的方法 - 尝试反应式编程，尤其是 RxJS。它与 React 配合得很好。

\n\n

如果您对连接 Rx 与 React 的选项感兴趣 - 请查看 gist https://gist.github.com/zxbodya/20c63681d45a049df3fc，它对于通过订阅上述 EventEmitter 来实现 HoC 组件也很有帮助。

\n\n

我有一个项目，旨在使用 React 创建同构（呈现的服务器端，而不是相同的 html 重用客户端）小部件。\n它有 DI 容器来传递依赖项，并使用 RxJS 来管理异步逻辑：

\n\n

https://github.com/zxbodya/reactive-widgets

\n