如何在 Nextjs 中使用 Redux devtools?

时间:2021-07-04 00:33:50

标签: reactjs redux react-redux next.js redux-thunk

我正在尝试在我的 Next.js 应用程序上使用 Redux DevTools 扩展。 redux 工作正常,但我无法在 devtools 中看到状态。

我做错了什么,我该如何解决?

_app.js



function MyApp({ Component, pageProps }) {
  const store = useStore(pageProps.initialReduxState);

  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

let store;

function initStore(initialState) {
    const composeEnhancers = typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

  return createStore(
    reducers,
    initialState,
    composeEnhancers(
        applyMiddleware(thunkMiddleware)
    )
  )
}

function useStore(initialState) {
  const store = useMemo(() => initializeStore(initialState), [initialState])
  return store
}

const initializeStore = (preloadedState) => {
  let _store = store ?? initStore(preloadedState)

  if (preloadedState && store) {
    _store = initStore({
      ...store.getState(),
      ...preloadedState,
    })
    store = undefined
  }

  if (typeof window === 'undefined') return _store
  if (!store) store = _store

  return _store
}

0 个答案:

没有答案