Асинхронное действие React Dispatch: не удалось найти значение контекста response-redux; пожалуйста, убедитесь, что компонент обернут в <Provider>

Question

У меня есть вызов. Я написал ряд своих компонентов, используя React useState для управления состоянием компонента. Однако мне нужно отправить асинхронное действие. Каждый раз, когда я пытаюсь это сделать, я получаю сообщение об ошибке «не удается найти значение контекстаact-redux; пожалуйста, убедитесь, что компонент обернут в провайдера»

Вот один из моих компонентов signup.jsx, где я нажимаю ошибка

import React, {useState} from 'react';
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
import { Button, FormGroup, FormControlLabel, Switch } from '@material-ui/core';
import './SignupPage.scss';
import { useDispatch, useSelector } from "react-redux";
import { auth } from '../../actions/apiRequestAdmin';

const SignupPage = () => {
    const dispatch = useDispatch();
const [formState, setFormState] = useState({superAdmin:false, superAdminValue: false, username: '', password: '', name: '' });

const handleSwitchChange = (event)=>{
    let [val, newVal] = [event.target.checked, false];
    console.log(val,newVal);
    
    
    if(val === true){
        newVal = true;
   }
    else{
      newVal = false
    }
    
    setFormState({...formState, superAdmin: newVal, superAdminValue: val});
    console.log(formState);
    
}

const handleInputChange = (e)=>{
if(e.target.name==="name"){
    setFormState({...formState, name:e.target.value })
}
if(e.target.name==="username"){
    setFormState({...formState, username:e.target.value })
}
if(e.target.name==="password"){
    setFormState({...formState, password:e.target.value })
}
}
const handleSubmission=()=>{
    const formData = {
        username: formState.username,
        password: formState.password,
        name: formState.name,
        superAdmin: formState.superAdminValue
    }
    console.log(formData);
    dispatch(auth('signup'));
}
return(<div className="center-div">
    <div className="form-container">
        <div id="formHeader" className="centered-text"><h3>Admin Registration</h3></div>
        <div id="formbody">
            <ValidatorForm
                //ref="form"
                 onSubmit={handleSubmission}
                onError={errors => console.log(errors)}>

                <TextValidator
                    className="form-input"
                    hiddenLabel
                    variant="outlined"
                    name="name"
                    margin="none"
                    onChange={handleInputChange}
                    placeholder="Full name"
                    type="text"
                    validators={['required']}
                    errorMessages={['This field is required']}
                    autoFocus={true}
                    value={formState.name}

                />

                <TextValidator
                    className="form-input"
                    hiddenLabel
                    variant="outlined"
                    name="username"
                    margin="none"
                    placeholder="email address"
                    type="text"
                    validators={['required', 'isEmail']}
                    errorMessages={['This field is required', 'Email is not valid']}
                    autoFocus={true}
                    onChange={handleInputChange}
                    value={formState.username}

                />
                <TextValidator
                    className="form-input"
                    hiddenLabel
                    variant="outlined"
                    name="password"
                    margin="none"
                    placeholder="password"
                    type="password"
                    validators={['required']}
                    errorMessages={['This field is required']}
                    autoFocus={true}
                    onChange={handleInputChange}
                    value={formState.password}

                />

                <FormGroup row>
                    <FormControlLabel
                        control={
                        <Switch checked={formState.superAdmin} onChange={handleSwitchChange} value={formState.superAdminValue} />
                        }
                        label="Super Admin"
                    />
                    
                    </FormGroup>

                <div className="center-btn-div" >
                    <Button className="" type="submit" variant="contained">Register</Button>
                </div>

            </ValidatorForm>
        </div>

    </div>
</div>)};

export default SignupPage;
//export default connect(undefined, mapDispatchToProps)(SignupPage);

А вот как я подключился к магазину

import React from 'react';
import {Provider} from 'react-redux';
import ReactDom from 'react-dom';
import StoreConfig from './store/StoreConfig';
import AppRouter from './router/router';
import LoginPage from './components/login-page/LoginPage';
import SignupPage from './components/signup-page/SignupPage';


// 
const store = StoreConfig();
console.log(store.getState());
  
  const jsx= (<Provider store={store}>
    <AppRouter />
</Provider>);

ReactDom.render(<SignupPage />, document.getElementById('root') );

Это мой первый раз использования метода hook useState () с диспетчеризацией асинхронных действий. Как мне успешно отправить моё действие?

Answer 1

Проблема в этой части вашего кода:

const jsx= (<Provider store={store}>
    <AppRouter />
</Provider>);

ReactDom.render(<SignupPage />, document.getElementById('root') );

В этой части вашего кода вы обернули AppRouter только в <Provider>, а не во все компоненты. И вы также не перешли на ReactDom.render(), вы просто передали <SignupPage /> этому, Это неправильно. Настоящий пример:

import React from 'react'
import ReactDOM from 'react-dom'

import { Provider } from 'react-redux'
import store from './store'

import App from './App'

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