解决react中使用react-redux获取不到上下文

---

记录react项目开发时发现的问题！

在使用react-redux时是否也出现他同意的报错！

Uncaught Error: could not find react-redux context value; 
please ensure the component is wrapped in a <Provider>

这句话大意是：未捕获错误：找不到react-redux上下文值；请确保组件包装在中；

1、使用useSelector（）时找不到react-redux上下文值；
2、这个时候我们就要查一查搭建框架的时候是否一并搭建了react-redux中Provider的模块；
3、问题找到了，我们只需要在根目录的入口文件配置Provider即可；

1、redux写法，封装user方法：

	import { createSlice } from "@reduxjs/toolkit";
	
	const userSlice = createSlice({
	  name: 'user', // 名称 必须
	  initialState: { // user的函数初始值
	    username: '',
	    token: '',
	    isLogin: false
	  },
	  reducers: {
	    setUser: (state,payload)=> {
	      state = payload;
	      return state;
	    },
	    deleteuser: state=> {
	      state.username = ''
	      state.token = ''
	      state.isLogin = false
	    }
	  }
	})
	
	// 每个reducer 函数会生成对应的 action creators
	export const { setUser,deleteuser } = userSlice.actions
	export default userSlice.reducer

2、redux写法，封装index入口文件方法：

	import { configureStore } from "@reduxjs/toolkit";
	import user from './reducers/user'
	
	const store = configureStore({
	  reducer: {
	    user
	  }
	})
	
	export default store

3、回顾–根目录入口引入redux下的index.js出错问题：

如果我们这样引入可以看到redux定义的参数，但用起来就会出现上面的报错：

4、正确姿势引入方法，并解决错误获取到相应数据：

1、引入react-redux中的Provider模块；
2、引入redux封装的根目录index.js文件；
3、在入口文件中进行包裹；

	import React from "react";
	import ReactDOM from "react-dom/client";
	import App from './App';
	import store from '../src/redux/index'
	import {Provider} from 'react-redux';
	
	// 导入初始化css样式
	import './assets/css/reset.css'
	import './assets/css/iconfont.css'
	import './assets/scss/index.scss'
	
	// 路由包裹容器
	import { BrowserRouter } from "react-router-dom";
	const root = ReactDOM.createRoot(document.getElementById('root'));
	root.render(
	  // 包裹方法，引入store取得对应值
	  <Provider store={store}>
	    <BrowserRouter>
	      <App />
	    </BrowserRouter>
	  </Provider>
	)

5、在页面中使用仓库存储的数据

    // 导入react-redux
  	import { useSelector } from 'react-redux';
  	
	export default function VideoDetail() {
	 // 获取react-redux中的用户信息
	 const userName = useSelector(state => state.user)
	 console.log(userName,'===userName===')
	}

打印参数可见

总结：

前端路上 | 所知甚少，唯善学。
各位小伙伴有什么疑问，欢迎留言探讨。

— 关注我：前端路上不迷路 —