将 Redux 开发工具与 NextJS 一起使用：当 Redux 被称为服务器端时，如何找出商店中发生了什么？

Question

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

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

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

商店设置为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 商店中发生了什么？ 我想做的是准确找出传递给减速器的值在何时何地被空白值覆盖。

Answer 1

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