使用Redux Provider时出现Invalid hook call错误求助

核心问题：未给Provider传入store实例 #

React Redux的<Provider>组件必须接收store作为必填属性，它的作用是将Redux store注入到整个React应用的上下文中。你的代码里仅使用了<Provider>但未传入store，导致内部hooks无法获取有效上下文，进而触发Invalid hook call和Cannot read properties of null (reading 'useMemo')错误。

修复步骤 #

1. 创建Redux Store实例 #

推荐使用官方简化方案Redux Toolkit创建store，新建store.js文件：

import { configureStore } from '@reduxjs/toolkit';
// 导入你的业务reducer，示例：
// import counterReducer from './features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    // 注册你的reducer，示例：
    // counter: counterReducer
  },
});

若使用传统Redux（不推荐），代码如下：

import { createStore } from 'redux';
import rootReducer from './reducers'; // 你的根reducer文件

export const store = createStore(rootReducer);

2. 在入口文件中传入store到Provider #

修改入口文件（index.js），导入store并传递给Provider：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import { store } from './store'; // 导入创建好的store

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}> {/* 添加store属性 */}
    <App />
  </Provider>
);

reportWebVitals();

额外排查点（若修复后仍有问题） #

• 检查多React副本：运行npm ls react和npm ls react-dom，查看输出是否存在重复的React包。如果有，删除node_modules和package-lock.json（或yarn.lock）后重新安装依赖，或执行npm dedupe合并重复包。
• 确认React版本匹配：确保react和react-dom的版本完全一致，避免版本不兼容导致的hook调用异常。

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