使用React Redux控制Bulma Modal状态时遭遇Uncaught TypeError: dispatcher.useSyncExternalStore is not a function错误的求助

我看到你被困在这个问题里快一天了，别着急，咱们一步步拆解解决——你现在遇到了两个核心问题：Redux状态读取的路径错误，以及React与React-Redux版本不兼容导致的API报错。

1. 先修正Redux状态的读取路径 #

首先看你的store.js，你给reducer定义的键名是stateChecker：

export default configureStore({
  reducer: {
    stateChecker : ActiveState, // 这里的键是stateChecker，不是isActiveState
  },
})

但你在Modal组件里写的是：

const isState = useSelector((state) => state.isActiveState)

这就导致你根本取不到正确的状态值！Redux的全局state结构是{ stateChecker: { value: ... } }，所以正确的读取方式应该是：

const isState = useSelector((state) => state.stateChecker.value)

另外，你的初始状态设为0有点不合理，建议改成空字符串''，避免把数字渲染成CSS类名：

// ActiveState.js
initialState: {
  value: '', // 替换原来的0
},
reducers: {
  stateCheck: (state) => {
    // 简化判断逻辑
    state.value = state.value === 'is-active' ? '' : 'is-active';
  }
}

2. 解决useSyncExternalStore is not a function报错 #

这个错误几乎100%是React和React-Redux版本不兼容导致的：

• React-Redux v8+ 依赖React 18新增的useSyncExternalStore API，如果你的React版本是17或更低，就会抛出这个错误；
• 反过来，如果React是18但React-Redux版本太旧，也可能出问题。

两种解决方案任选其一： #

方案A：升级React到18版本

如果你的项目允许升级，执行命令：

npm install react@latest react-dom@latest

之后可以把index.js改成React 18的标准渲染方式（可选，但推荐）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './components/CSS/index.css';
import App from './App';
import store from './store'
import { Provider } from 'react-redux'

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

方案B：降级React-Redux到v7版本

如果不想升级React，安装兼容的旧版本即可：

npm install react-redux@7.2.9

这个版本不需要依赖React 18的API，能在React 17及以下正常工作。

最后验证修改 #

完成以上两步后：

• 触发dispatch(stateCheck())时，Redux状态会正确切换为空字符串或'is-active'；
• Modal的类名会随之变化，Bulma的Modal组件就能正常显示/隐藏了；
• 控制台的useSyncExternalStore错误也会消失。

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