在NextJS中使用Redux工具:如何了解Redux被称为服务器端时发生了什么？

Question

我们有一个使用NextJS和Redux块的next-redux-wrapper应用程序。当我们通过本地链接加载页面时，我们有一个运行良好的页面，也就是说，它是在本地呈现的，但是当我们重新加载页面，从而在服务器上呈现它时，我们的存储仍然(部分)为空:某些字段从未被填充。

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

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

​

​

​

​

商店是按照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服务器到客户端的商店传输。当我让它成为一个直接的，异步的，调用在我的雷鸣，所有的工作良好。