Reactjs 下一个js使用redux并重新选择

我遇到了一个问题，当我在next.js和redux中使用reselect时，当redux状态被reducer更改时，组件将不会重新渲染

在容器中，我有一个记忆选择器函数，但是在容器之前调用选择器，并且在类别加载成功后容器不会重新呈现

当我不记忆选择器时，它会工作，但每次状态发生变化时，都会重新呈现菜单

完整代码是

以下是一些可能相关的信息：

pages/index.js

import React from "react";
import Menu from "../components/Menu";

function HomePage() {
  return <Menu />;
}

export default HomePage;

store/selectors.js

import { selectCategoriesRequested } from "./store/selectors";
import { loadCategories } from "./store/actions";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";

export const useCategories = query => {
  const dispatch = useDispatch();
  const requested = useSelector(selectCategoriesRequested);
  useEffect(() => {
    if (!requested && process.browser) {
      dispatch(loadCategories(query));
    }
  }, [dispatch, query, requested]);
};

hooks.js

initStore.js:18   reducer: @@INIT
Menu.js:15        MenuContainer start
selectors.js:10   selector returning: 0
Menu.js:25        MenuContainer end []
initStore.js:18   reducer: CATEGORIES_LOADING
selectors.js:10   selector returning: 0
Menu.js:15        MenuContainer start
Menu.js:25        MenuContainer end []
initStore.js:18   reducer: CATEGORIES_LOADING_SUCCEEDED
selectors.js:10   selector returning: 1

日志的输出：

export const selectCategoriesNested = state =>
  nestCategories(selectCategoriesData(state));

如果我将选择器更改为：

Menu.js:15    MenuContainer start
Menu.js:25    MenuContainer end [{…}]

我有两个额外的控制台日志：

payload.reduce((categories, category) => {
  categories[category.id] = category;
  return categories;
}, state.categories.data);

我想知道的是，为什么选择器在MenuContainer启动之前被称为，而选择器应该在MenuContainer中被称为

更新

添加了一些日志，看起来nextjs正在以某种方式改变存储。添加了

CATEGORIES\u LOADING\u成功后

操作，选择器从

Same[]

记录到

Same[“1”]

。除非数据发生变异，否则这是不可能的，但我看不出数据是如何变异的

---

我可能错了，但这看起来像一个bug，所以我提交了一个

这令人尴尬，但是我犯了错误。reducer不会在reduce函数中改变state.categories.data：

payload.reduce((categories, category) => {
  categories[category.id] = category;
  return categories;
}, {...state.categories.data});

我将

state.categories.data

作为第二个参数传递给

payload.reduce

，并在reducer函数中对其进行变异。此减速器功能应为：

Menu.js:15    MenuContainer start
Menu.js:25    MenuContainer end [{…}]

payload.reduce((categories, category) => {
  categories[category.id] = category;
  return categories;
}, state.categories.data);

payload.reduce((categories, category) => {
  categories[category.id] = category;
  return categories;
}, {...state.categories.data});