Next.js集成Redux调用useSelector报需传入selector错误排查

Error: You must pass a selector to useSelector 报错的触发条件是传入useSelector的参数不是合法函数，你的场景下根因是userSlice.js存在代码错位问题，导致导入的selectUser实际值为undefined：

• 你提供的userSlice.js代码第一行错误出现了本应属于Home页面末尾的export default Home语句，这行代码完全不属于slice文件：
  • 该语句引用了userSlice.js中从未定义的Home变量，直接导致Redux slice模块加载失败
  • 模块解析异常后，Home页面中通过import { selectUser } from '../config/userSlice'导入的selectUser实际为undefined，传入useSelector就会触发该报错
• 该错位代码还导致userSlice.js出现两个export default语句，ES模块不允许同一文件重复默认导出，会进一步加剧模块解析错误。

1. 修正userSlice.js代码
   打开/config/userSlice.js，删除文件开头错位的export default Home行，修正后的完整代码如下：

   import { createSlice } from '@reduxjs/toolkit';
   export const userSlice = createSlice({
     name: 'user',
     initialState: {
       user: null,
     },
     reducers: {
       login: (state, action) => {
         state.user = action.payload;
       },
       logout: (state) => {
         state.user = null;
       },
     },
   });
   export const { login, logout } = userSlice.actions;
   // 选择器
   export const selectUser = (state) => state.user.user;
   export default userSlice.reducer;
   

2. 校验Home页面导出
   打开Home页面文件，确认export default Home语句放在Home组件定义的最末尾，没有遗漏或放错位置。
3. 校验Store配置
   检查Redux store配置文件，确认userSlice的reducer已正确注入，且reducer配置的key与selector的取值路径匹配：

   import { configureStore } from '@reduxjs/toolkit';
   import userReducer from '../config/userSlice';
   
   export const store = configureStore({
     reducer: {
       user: userReducer, // 此处key为user，对应selector中state.user的取值路径
     },
   });
   

4. 校验Provider包裹
   Next.js项目必须在自定义_app.jsx文件中用Redux Provider包裹整个应用，否则页面中无法正常使用Redux hooks，参考配置：

   import { Provider } from 'react-redux';
   import { store } from '../config/store';
   
   export default function MyApp({ Component, pageProps }) {
     return (
       <Provider store={store}>
         <Component {...pageProps} />
       </Provider>
     )
   }
   

• 你在Next.js项目中引入了react-router-dom的BrowserRouter，Next.js本身自带文件系统路由能力，二者混用容易引发路由冲突、SSR渲染报错，无特殊需求建议移除react-router相关代码。
• 你的Home组件JSX中直接使用了// 单行注释写法，JSX语法中注释必须包裹在{/* */}块中，否则注释内容会被直接渲染为页面文本。

内容的提问来源于stack exchange，提问作者RolyM