使用带有 NextJS 的 Redux 开发工具：当 Redux 被称为服务器端时，如何找出存储中发生的事情？

Posted 2023-02-22

【中文标题】使用带有 NextJS 的 Redux 开发工具：当 Redux 被称为服务器端时，如何找出存储中发生的事情？

【英文标题】：Using Redux dev tools with NextJS: how to find out what's going on in store when Redux is being called server side?

【发布时间】：2020-07-27 11:27:55

【问题描述】：

我们有一个使用 next-redux-wrapper 和 Redux thunk 的 NextJS 应用程序。当我们通过本地链接加载页面时，我们有一个页面可以正常工作，也就是说，它在本地呈现，但是当我们重新加载页面，从而在服务器上呈现它时，我们的存储（部分）保持为空：某些字段永远不会填满。

我正在使用 Redux 开发工具来跟踪操作，但是当我重新加载操作列表中的页面时，我看到的只是 @@init。当我将日志语句放入时，我看到 - 在服务器端控制台中 - 我的 reducer 正在使用有效值调用。但是，该字段在商店中仍然为空，如浏览器中的 RDT 所示。

Redux 操作未显示在浏览器 Redux Dev Tools 控制台中，因为它们发生在服务器上。

店铺设置为next-redux-wrapper指示

// _app.ts
import withRedux from 'next-redux-wrapper';
import initStore from '../redux/store';

const makeStore = initialState => 
  return initStore(initialState);
;

const MyApp = ( Component, pageProps, apollo, store : Props) => 
  return (
    <ApolloProvider client=apollo>
      <Provider store=store>
        <Sidebar />
        <Component ...pageProps />
      </Provider>
    </ApolloProvider>
  );
;

MyApp.getInitialProps = async appContext => 
  const  Component, ctx  = appContext;
  const appProps = await App.getInitialProps(appContext);
  const pageProps = Component.getInitialProps
    ? await Component.getInitialProps(ctx)
    : ;

  const allProps = 
    ...appProps,
    ...pageProps
  ;
  return  ...allProps ;
;
export default withRedux(makeStore)(withApollo(MyApp));

如果我无法使用 Redux 开发工具查看，我如何才能弄清楚我的 Redux 商店中发生了什么？我想做的是准确找出 where 和 when 传递给 reducer 的值被空白值覆盖。

【参考方案1】：

结果是我在我的 thunk 服务器端调度了一个 thunk，我想结果没有及时返回以使其从 NextJS 服务器到客户端的存储传输。当我在我的 thunk 中将其设为直接的异步调用时，一切正常。