如何将 Redux devtools 与 Nextjs 一起使用？

Posted 2023-02-22

【中文标题】如何将 Redux devtools 与 Nextjs 一起使用？

【英文标题】：How to use Redux devtools with Nextjs?

【发布时间】：2021-09-15 08:01:05

【问题描述】：

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

【参考方案1】：

我正在使用 next-redux 包装器，这是我设置它的方式：

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;
;

【参考方案2】：

问题在于 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

【讨论】：

如果您仔细阅读问题，您会发现您的建议已包含在共享代码中。

嘿史蒂文。这个答案很有效，非常感谢你拯救了我的一天

【参考方案3】：

使用ternary operator

=>

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