使用useDispatch报错：无法找到react-redux上下文值，如何正确用Provider包裹？

错误原因 #

这个错误说白了就是：你的SidebarOption组件没被react-redux的<Provider>组件包住，导致useDispatch这类Redux钩子找不到Redux store的上下文，自然报错。

你之前尝试在index.js或App.js加<Provider>却出导入错误，十有八九是这俩情况：

• 你没正确创建并导出Redux store文件（比如store.js）
• 导入store时路径写错了，或者store文件本身有语法错误（比如配置configureStore/createStore时写错代码）

是否需要其他方式包裹？ #

不用搞花里胡哨的包裹方式，标准的<Provider>包裹就是唯一正确的路子，但你得先把store的导入问题解决了：

步骤1：先把Redux store创建对 #

在src目录下建个store.js，参考代码：

// 用Redux Toolkit的写法（推荐）
import { configureStore } from '@reduxjs/toolkit';
// 替换成你自己的reducer，比如处理聊天室状态的reducer
import chatReducer from './features/chat/chatSlice';

export const store = configureStore({
  reducer: {
    chat: chatReducer,
    // 其他reducer放这...
  },
});

要是用的老版Redux（不用Toolkit），代码这么写：

import { createStore } from 'redux';
import rootReducer from './reducers';

export const store = createStore(rootReducer);

步骤2：在入口文件正确包裹App #

打开index.js，按下面的方式导入并使用Provider：

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

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

步骤3：排查导入错误 #

要是还出导入问题，检查这几点：

• store.js是不是在src目录下，路径对不对
• store文件里有没有语法错误（比如少个括号、忘了导出store）
• 导入语句的路径写没写错（比如store在src/store/index.js的话，路径可以写./store或者./store/index）

额外提醒 #

• 所有用了useDispatch、useSelector这些Redux钩子的组件，都得在<Provider>的子组件树里，不能放外面
• 要是你用Create React App建的项目，别忘了装依赖：npm install react-redux @reduxjs/toolkit（用Toolkit的话）或者npm install react-redux redux（老版Redux）

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