添加Redux Provider后出现Cannot read properties of null错误求助

问题描述 #

集成Redux及<Provider>组件后，原本正常运行的应用出现Cannot read properties of null (reading 'useMemo')错误，报错位置指向<Provider>组件，且Redux store似乎未创建成功。本人代码中未直接使用useMemo钩子。

相关代码 #

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { legacy_createStore as createStore } from 'redux';
import { Provider } from 'react-redux';
import ApplyChange from './redux/rootReducer';

const store = createStore(ApplyChange);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>
);

reportWebVitals();

rootReducer.js #

const initialValue = {
  perms: [],
};

const ApplyChange = (state = initialValue, action) => {
  switch (action.type) {
    case 'SETPERMS':
      return { ...state, perms : action.payload };
    
    default:
      return state;
  }
};

export default ApplyChange;

依赖版本 #

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.1.2",
"redux" : "^4.2.1"

错误信息 #

Uncaught TypeError: Cannot read properties of null (reading 'useMemo')
at Object.useMemo (react.development.js:1650:1)
at Provider (Provider.js:14:1)
at Provider (http://localhost:3000/static/js/bundle.js:41257:3)

解决方案 #

• 清理并重装依赖：该错误常因项目存在多个React实例导致，删除node_modules文件夹和package-lock.json文件后，重新执行npm install即可。
• 改用Redux Toolkit创建Store：legacy_createStore已被官方废弃，改用configureStore可避免潜在兼容性问题：
  1. 安装Redux Toolkit：npm install @reduxjs/toolkit
  2. 修改Store创建代码：

     import { configureStore } from '@reduxjs/toolkit';
     // 替换原legacy_createStore导入
     
     const store = configureStore({
       reducer: ApplyChange
     });
     

• 升级react-redux版本：尝试升级至最新稳定版：npm update react-redux

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