将Redux开发工具与NextJS结合使用:当Redux被称为服务器端时，如何找出存储中发生了什么? [英] Using Redux dev tools with NextJS: how to find out what's going on in store when Redux is being called server side?

问题描述

我们有一个使用next-redux-wrapper和Redux thunk的NextJS应用程序.当我们通过本地链接加载页面(即在本地呈现)时，我们有一个页面可以正常工作，但是当我们重新加载页面从而在服务器上呈现页面时，我们的商店仍然(部分)为空:某些字段永远填充.

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.

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

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.

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

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

商店是按照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 和 .

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.

推荐答案

答案是我在thunk服务器端调度了一个thunk，我想结果没有及时回来使它从NextJS服务器到客户端的商店转移.当我在其thunk中直接进行异步调用时，一切正常.

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.

这篇关于将Redux开发工具与NextJS结合使用:当Redux被称为服务器端时，如何找出存储中发生了什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！