编写多个 React 提供程序

在应用程序的根目录中使用 React 的上下文来管理任何组件之间的共享状态是很可笑的。

例如，检查当前用户是否已登录可能是由提供程序完成的：AuthProvider

const App = () => {
    return (
        <AuthProvider>
            {...}
        </AuthProvider>
    );
};

使用多个提供程序可能会使代码更难阅读，因为有很多嵌套组件：

const App = () => {
    return (
        <Router>
            <AuthProvider>
                <ThemeProvider>
                    <LocalizationProvider>
                        {...}
                    </LocalizationProvider>
                </ThemeProvider>
            </AuthProvider>
        </Router>
    );
};

可以使用以下函数将提供程序组合在一起：reduce

const compose = (providers) =>
    providers.reduce((Prev, Curr) => ({ children }) => (
        <Prev>
            <Curr>{children}</Curr>
        </Prev>
    ));

根中的提供程序声明可以缩短如下：

const Provider = compose([
    Router,
    AuthProvider,
    ThemeProvider,
    LocalizationProvider,
]);

const App = () => {
    return (
        <Provider>
            {...}
        </Provider>
    );
};

标签：redis,HyperLogLog,统计,结构,数据,分析,网站
来源：