Resolva o problema de que react-redux não consegue obter contexto em react

---

Registre os problemas encontrados durante o desenvolvimento do projeto react!

O erro com o qual ele concorda aparece ao usar o react-redux!

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

Esta frase é mais ou menos assim: Uncaught Error: React-redux context value not found; certifique-se de que o componente está encapsulado;

1. Ao usar useSelector(), o valor do contexto react-redux não pode ser encontrado;
2. Neste momento, precisamos verificar se o módulo Provider no react-redux é construído junto ao construir o framework;
3. O problema foi encontrado, precisamos apenas configurar o Provider no arquivo de entrada do diretório raiz;

1. Método de escrita Redux, encapsulando o método do usuário:

	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. Método de escrita Redux, método de arquivo de entrada de índice de encapsulamento:

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

3. Revisão – a entrada do diretório raiz introduz o problema de erro index.js no redux:

Se o introduzirmos assim, podemos ver os parâmetros definidos pelo redux, mas quando o usamos, o erro acima aparecerá:

4. Apresente o método de postura correta e resolva o erro para obter os dados correspondentes:

1. Importe o módulo Provider no react-redux;
2. Importe o arquivo index.js no diretório raiz do pacote redux;
3. Empacote-o no arquivo de entrada;

	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 os dados armazenados no warehouse na página

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

Os parâmetros de impressão são visíveis

Resumir:

No caminho para a frente | Sei muito pouco, mas sou bom em aprender.
Se você tiver alguma dúvida, por favor deixe uma mensagem para discutir.

- Siga-me: não se perca no front-end -