Question

很久以来我一直在使用nextjs，最近将其更新为最新版本。而且有一件事我无法动摇任何帮助，将不胜感激

我正在将redux saga与nextjs一起使用，并使用getServerSideProps

考虑我有2页 A页页面B

页面A-使用api / a中的数据

页面B-使用api / a和api / b中的数据

场景1- 现在，如果有人登陆到页面A上，则api / a的数据存储在redux中，并且如果有人从客户端本身导航到页面B，则可以使用redux中存在的数据，并且可以对api / b进行点击以获取剩余数据B页。

这是由rootReducer处理的

import { combineReducers } from "redux";

import { HYDRATE } from "next-redux-wrapper";
import faqCategoriesReducer from "./faqCategories/faqCategories.reducer";
import categoryFaqsReducer from "./categoryFaqs/categoryFaqs.reducers";

const combinedReducer = combineReducers({
  faqCategories: faqCategoriesReducer,
  categoryFaqs: categoryFaqsReducer,
});

const rootReducer = (state, action) => {
  if (action.type === HYDRATE) {
    const nextState = {
      ...state, // use previous state
      ...action.payload, // apply delta from hydration
    };
    if (state.faqCategories && state.faqCategories.categories.length > 0)
      nextState.faqCategories = state.faqCategories; // preserve categories on client side navigation
    return nextState;
  } else {
    return combinedReducer(state, action);
  }
};

export default rootReducer;

请注意检查“ state.faqCategories”，以便如果Redux中存在上一页A中的数据，即使将其用于B页也将得到维护。

场景2- 现在，如果有人直接登陆页面B，我们必须同时点击api / a和api / b来获取数据并将其存储在redux中。

如下

页面B的getServerSideProps

export const getServerSideProps = wrapper.getServerSideProps(
  async ({ store, req, res, query, params, ...etc }) => {
    const categoryId = params.categorySlug;
    store.dispatch(requestApiAData())
    store.dispatch(requestApiBData());
    store.dispatch(END);
    await store.sagaTask.toPromise();
  }
);

这也按预期工作。

现在，您可以看到我们正在拨打电话- getServerSideProps中的store.dispatch（requestApiAData（））。即使用户直接登陆页面B或从页面A导航到页面B，也会发送此匹配。

问题- 当用户从页面A导航到页面B时，如何避免调用store.dispatch（requestApiAData（））。在这种情况下，api / a的数据已经在redux存储中。

我尝试过的解决方案- 试图在实战中使用建议，但鉴于它已在服务器上运行，因此它不包含上一页的数据。

在nextjs中使用getServerSideProps在客户端导航之间重用redux数据进行调用

0 个答案: