如何在Nextjs中使用Redux devtools？

2ledvvac 于 2022-11-24 发布在其他

关注(0)|答案(4)|浏览(163)

我尝试在Next.js应用程序上使用Redux DevTools扩展。Redux运行正常，但我无法在devtools中看到状态。
我做错了什么？我该如何改正？

_应用程序.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
}

redux

来源：https://stackoverflow.com/questions/68240874/how-to-use-redux-devtools-with-nextjs

4条答案

按热度按时间

fruv7luv1#

问题是devtools只在浏览器中运行，因为nextjs是一个框架，在节点进入浏览器之前执行javascript。
解决方案？添加条件**if（typeof window！== 'undefined'）**到 composeEnhancers 部分。我在代码中做了类似的操作：

// ---Redux DevTools
let composeEnhancers = compose;
if (typeof window !== 'undefined') {
  composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}

这样可以确保redux devtools配置仅在浏览器中运行：D

赞(0）回复(0）举报 2022-11-24

ymzxtsji2#

我使用的是next-redux Package 器，我是这样设置的：

const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== "production") {
   // I require this only in dev environment
    const { composeWithDevTools } = require("redux-devtools-extension");
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

export const makeStore = (context) => {
  const store = createStore(
    rootReducer,
    bindMiddleware([thunk])
  );
  return store;
};

赞(0）回复(0）举报 2022-11-24

vnzz0bqm3#

在我的例子中，我试着使用测试版的nextjs，使用app文件夹，而不是pages -〉_app. tsx，我的redux开发工具总是这样显示：

解决方案：遵循此example并开始使用_app.tsx

赞(0）回复(0）举报 2022-11-24

inn6fuwd4#

使用ternary operator
=〉

const store = createStore(   todoReducer,   typeof window !== "undefined"
    ? window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
    : null );

赞(0）回复(0）举报 2022-11-24

我来回答

如何在Nextjs中使用Redux devtools？

4条答案

相关问题

热门标签

最新问答