wrapRootElement + contextAPI: изменения страницы приводят к повторному рендерингу провайдера, поэтому происходит сброс

Question

Сводка

Я использую контекстные API React и ловушки для создания глобального 'StateProvider', однако, когда я меняю страницы, мой провайдер повторно отображает, что приводит к потере активного состояния и возвращению к значению по умолчанию.

Насколько я понимаю, использование метода wrapRootElement должно означать, что мой stateProvider должен сохраняться.

Буду очень признателен за советы по устранению этой проблемы!

Соответствующая информация

gatsby-browser. js

const StateProvider = require("./src/components/store/store").StateProvider
exports.wrapRootElement = ({ element }) => {
  return <StateProvider>{element}</StateProvider>
}

магазин. js

const StateProviderContext = createContext()
const DispatchProviderContext = createContext()

const StateProvider = ({ children }) => {
  console.log("init")
  const tocTree = useEntries()
  const initialState = reducer(
    {},
    {
      type: INIT_PAGE,
      value: { pathname, tocTree },
    }
  )
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <StateProviderContext.Provider value={state}>
      <DispatchProviderContext.Provider value={dispatch}>
        {children}
      </DispatchProviderContext.Provider>
    </StateProviderContext.Provider>
  )
}

Answer 1

Следуйте за : https://codesandbox.io/s/soanswer60606158-pfm2b

Обычно вам нужно реализовать wrapRootElement в обоих gatsby-ssr.js И gatsby-browser.js.

https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement

Вы можете видеть, что я извлек wrapRootElement.js, который импортируется в оба упомянутых файла.

./wrapRootElement.js

import React from "react"
import StateProvider from "./src/components/store/store"

const wrapRootElement = ({ element }) => {
  return <StateProvider>{element}</StateProvider>
}

export default wrapRootElement

gatsby-browser.js

import wrapRootElement from "./wrapRootElement"

export { wrapRootElement }

gatsby-ssr.js

import wrapRootElement from "./wrapRootElement"

export { wrapRootElement }