在React应用程序中实现两个提供者

时间:2020-02-01 18:36:40

标签: javascript reactjs redux auth0

我正在尝试在我的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")
);

Redux的提供程序应该包装Auth0提供程序,还是Auth0应当包装Redux?

1 个答案:

答案 0 :(得分:0)

没关系。嵌套在这两个提供程序中的所有内容,无论哪个包装了对方,都应有权访问它们提供的内容。