Redux nextjs ReferenceError：初始化前无法访问'XXX' TypeError：react_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector（）未定义

Question

我有一个宠物项目，可以在 nextjs 上使用 redux React。

我遇到了非常模糊的错误消息 - 它们有时会改变并且不指向一致的位置。

ReferenceError: Cannot access 'initialState' before initialization nextjs

react_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector() is undefined

Error: <Html> should not be imported outside of pages/_document.

Answer 1

有问题的版本

我进行了深入的调试并找到了罪魁祸首。

该项目与

ducks

合作，其中

dispatch-functions

已准备好并导出。

辅助函数包含这样的调度函数，该辅助函数本身在组件中使用。

#far.ts
export const foo = (dispatch: Dispatch, bar) => {
  theDuck.dispatcher.foo(dispatch, bar);
};

#zar.ts
export const zoo = (dispatch: Dispatch, car) => {
   // some other stuff happens...
   far.foo(dispatch, [car.data()]);
};

#component.tsx
const save = () => {
   zar.zoo(dispatch, car);
};

引入回调以移出对调度程序函数的调用确实有帮助。

#far.ts
export const foo = (dispatch: Dispatch, bar) => {
  theDuck.dispatcher.foo(dispatch, bar);
};

#zar.ts
export const zoo = (dispatch: Dispatch, callback) => {
   // some other stuff happens...
   callback([car.data()]);
};

#component.tsx
const save = () => {
   const callback = (cardata) => {
     far.foo(dispatch, [car.data()]);
   }
   zar.zoo(dispatch, callback);
};

可能与最佳实践相差甚远，但至少我可以在这里继续我的宠物项目。