如何使用 Next-redux-wrapper 在 Next.js(Typescript) 中使用 SSR 和 Redux？ [复制]

Question

在 Next.js(Typescript) 中使用带有 SSR 的 redux 使用 next-redux-wrapper，但在这一行出现错误

异步 ​​({ req, store })

说，Type 'Promise' 与签名不匹配'(context: GetServerSidePropsContext): Promise>

类型 'Store & { 调度：未知； }'。

类型 'Store & { 调度：未知； }'

这是我的 SSR 代码：-

export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps(async ({ req, store }) => {


  let { query } = req

  let searchCategory = query.category?.toString().toLowerCase().replace(/ /g, "-");

  const apolloClient = initializeApollo();
  const response = await apolloClient.query({
    query: GET_PRODUCT_BY_CATEGORY,
    variables: {
      numProducts: 10,
      category: searchCategory
    }
  });
  await store.dispatch(getProducts(response));
  
}); 

Answer 1

这个代码库可以帮助你。 （“下一个”：“10.1.3”） 尝试使用getInitialProps 而不是getServerSideProps。 这适用于我的情况。如下代码：

试试 在 _app.js 中

import { wrapper } from '/store';

function MyApp(props) {
  const { Component, pageProps } = props;
...
return (
            <Component {...pageProps} />
       )
}
App.getInitialProps = async props => {
  const { Component, ctx } = props;
  const pageProps = Component.getInitialProps
    ? await Component.getInitialProps(ctx)
    : {};
  //Anything returned here can be accessed by the client
  return { pageProps: pageProps, store: ctx.store };
};
export default wrapper.withRedux(App);

store.js 文件：

const makeStore = props => {
  if (!isEmpty(props)) {
    return createStore(reducer, bindMiddleware([thunkMiddleware]));
  } else {
    const { persistStore, persistReducer } = require('redux-persist');
    const persistConfig = {
      key: 'root',
    };
    const persistedReducer = persistReducer(persistConfig, reducer); // Create a new reducer with our existing reducer
    const store = createStore(
      persistedReducer,
      bindMiddleware([thunkMiddleware])
    ); // Creating the store again

    store.__persistor = persistStore(store); // This creates a persistor object & push that persisted object to .__persistor, so that we can avail the persistability feature
    return store;
  }
};

// Export the wrapper & wrap the pages/_app.js with this wrapper only
export const wrapper = createWrapper(makeStore);

在您的页面中：

HomePage.getInitialProps = async ctx => {
   const { store, query, res } = ctx;
};

Answer 2

您以错误的方式拨打wrapper.getServerSideProps。

尝试如下：

export const getServerSideProps = wrapper.getServerSideProps(
  store => async ({req, res, query}) => {
    // do your stuff with store and req
  }
);

如果您正在寻找工作演示，可以访问my old answer