Solve the problem that react-redux cannot get context in react

---

Record the problems found during the development of the react project!

Does the error he agrees with appear when using react-redux!

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

This sentence roughly reads: Uncaught Error: React-redux context value not found; make sure the component is wrapped in;

1. The react-redux context value cannot be found when using useSelector();
2. At this time, we need to check whether the Provider module in react-redux was built when building the framework;
3. The problem is found, we only need to configure Provider in the entry file of the root directory;

1. Redux writing method, encapsulating user method:

	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 writing method, encapsulation index entry file method:

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

3. Review – the root directory entry introduces the index.js error problem under redux:

If we introduce it like this, we can see the parameters defined by redux, but when we use it, the above error will appear:

4. Introduce the correct posture method, and solve the error to obtain the corresponding data:

1. Import the Provider module in react-redux;
2. Import the index.js file in the root directory of redux package;
3. Package it in the entry file;

	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. Use the data stored in the warehouse in the page

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

The print parameters are visible

Summarize:

On the road to the front | I know very little, but I am good at learning.
If you have any questions, please leave a message to discuss.

— Follow me: Don’t get lost on the front end —