如何使用 next-redux-wrapper 在 Next.js(Typescript) 中将 SSR 与 Redux 一起使用？

Question

使用 next-redux-wrapper 在 Next.js(Typescript) 中将 redux 与 SSR 结合使用，但在这一行出现错误

async ({ req, store })

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

属性 'req' 在类型 'Store<EmptyObject & { filterReducer: never; }, any> & { dispatch: unknown; }' 上不存在。

属性 'store' 在类型 'Store<EmptyObject & { filterReducer: never; }, any> & { dispatch: unknown; }'

上不存在

这是我的 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
  }
);

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

如何使用 next-redux-wrapper 在 Next.js(Typescript) 中将 SSR 与 Redux 一起使用？

How to use SSR with Redux in Next.js(Typescript) using next-redux-wrapper?

server-side-rendering

react-redux

next.js