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

Question

We have a NextJS application using next-redux-wrapper and Redux thunks. We have a page that works fine when we load the page via a local link, that is, it's rendered locally, but when we reload the page, thus rendering it on the server, our store remains (partially) empty: certain fields are never filled.

I'm using Redux dev tools to follow the actions, but all I ever see when I reload the page in the list of actions is @@init . When I put log statements in I see -- in the server-side console -- that my reducer is being called with valid values. However that field remains empty in the store, as shown by RDT in the browser.

The Redux actions are not showing up in the browser Redux Dev Tools console because they are happening on the server.

The store is set up as next-redux-wrapper instructs

// _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));

How can I figure out what's happening in my Redux store if I can't use Redux Dev Tools to see? What I'd like to do is find out exactly where and when the values that are being passed to the reducers are overwritten with a blank value.

Answer 1

The answer turned out to be that I was dispatching a thunk within my thunk server side, and I suppose that the result didn't come back in time to make it to the store transfer from NextJS server to the client. When I made it a direct, async, call within my thunk, all worked fine.