將 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 中將其設為直接的異步調用時，一切正常。