在 React 应用程序中实现两个 Provider答案

【问题标题】：Implement two Providers in React application在 React 应用程序中实现两个 Provider
【发布时间】：2020-02-02 02:39:12
【问题描述】：

我正在尝试在我的 react 应用程序中实现一个 Redux 存储。我正在使用 Auth0 进行身份验证和授权。我需要将 UserID 和权限等数据存储到我的商店中。目前我的 index.js 文件如下：

// src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Auth0Provider } from "./react-auth0-spa";
import config from "./auth_config.json";
import history from "./utils/history";
import {createStore} from "redux";
import rootReducer from './redux/reducer';
import {Provider} from "react-redux";

//create Redux store
const store = createStore(rootReducer);

// A function that routes the user to the right place
// after login
const onRedirectCallback = appState => {
  history.push(
    appState && appState.targetUrl
      ? appState.targetUrl
      : window.location.pathname
  );
};

ReactDOM.render(
  
  <Auth0Provider
    domain={config.domain}
    client_id={config.clientId}
    redirect_uri={window.location.origin}
    audience={config.audience}
    onRedirectCallback={onRedirectCallback}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

应该是 Provider for Redux 包装 Auth0 提供者还是应该 Auth0 包装 Redux？

【问题讨论】：

标签： javascript reactjs redux auth0

【解决方案1】：

应该没关系。嵌套在两个提供者中的所有内容，无论哪个包装另一个，都应该可以访问它们提供的内容。

【讨论】：