React项目集成react-redux使用Provider组件出现异常错误如何解决？

问题根因 #

从报错栈可以判断是版本不兼容问题：你当前使用的react-redux版本依赖React Hooks特性（Provider内部调用了useMemo这个Hook API），而Hooks是React 16.8.0版本才新增的特性，如果你项目中的React版本低于16.8.0，就会触发该报错。

解决方案 #

你可以选择以下任意一种方案解决：

方案1：升级React版本（推荐） #

直接将项目的React升级到支持Hooks的版本，执行以下命令：

npm install react@latest react-dom@latest

升级完成后重启项目即可。

方案2：降级react-redux版本 #

如果你不想改动现有React版本，可以将react-redux降级到不依赖Hooks的6.x版本，执行以下命令：

npm install react-redux@6.x

额外兼容优化 #

你当前store.js中的DevTools配置存在兼容性问题，在没有安装Redux DevTools插件的浏览器环境下会导致store初始化失败，建议修改为更稳妥的写法：

// store.js
import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const initialState = {};
const middleware = [thunk];
// 兼容无DevTools插件的环境
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, initialState, composeEnhancers(applyMiddleware(...middleware)));

export default store;

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