Несколько Gatsby wrapRootElement (реализующий Auth0 и Redux) - PullRequest
Новая
       10

Несколько Gatsby wrapRootElement (реализующий Auth0 и Redux)

1 голос
/ 15 февраля 2020

Я пытаюсь реализовать Gatsby как с Auth0, так и с Redux

Поскольку и Auth0, и Redux должны использовать wrapRootElement в gatsby-browser. js, как их объединить, чтобы успешно использовать их в Гэтсби? Заранее спасибо

браузер Гэтсби. js

// used by Auth0
export const wrapRootElement = ({ element }) => {
  return <SessionCheck>{element}</SessionCheck>
}

// used by Redux
export { default as wrapRootElement } from "./src/state/ReduxWrapper"

Гэтсби-ССР. js

Обратите внимание, что я также импортирую, а затем экспортирую ReduxWrapper в gatsby-ssr. js

// export { default as wrapRootElement } from "./src/store/ReduxWrapper"

ReduxWrapper. js

import React from "react"
import { Provider } from "react-redux"
import { createStore as reduxCreateStore } from "redux"
import rootReducer from "."

const createStore = () => reduxCreateStore(rootReducer)

export default ({ element }) => (
  <Provider store={createStore()}>{element}</Provider>
)

Я попытался сделать следующее в gatsby-browser. js но он возвращает пустую страницу 

export const wrapRootElement = ({ element }) => {
  return (
    <SessionCheck>
      <ReduxWrapper>{element}</ReduxWrapper>
    </SessionCheck>
  )
}

1 Ответ

1 голос
/ 17 февраля 2020

Благодаря Джереми Олбрайт, вот решение вышеупомянутой проблемы. Удачное кодирование

По сути, элемент должен передаваться в ReduxWrapper как реквизит, а НЕ как дочерний элемент

gatsby-browser. js

export const wrapRootElement = props => {
  return (
    <SessionCheck>
      <ReduxWrapper {...props} />
    </SessionCheck>
  )
}
...