React Dispatch asynchronous action: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

Question

I have a challenge. I wrote a number of my components using React useState to manage the state of the component. I however need to dispatch asynchronous action. Each time I try to do that I get the error "could not find react-redux context value; please ensure the component is wrapped in a Provider"

Here is one of my components signup.jsx where I hit the error

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);

And here is how I connected to store

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') );

This is my first time of using the react hook useState() with asynchronous action dispatch. How do I dispatch my action successfully please?

Answer 1

The problem is in this part of your code:

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

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

In this part of your code you only wrapped AppRouter in a <Provider> , not the whole components. And you also didn't pass to ReactDom.render() you just passed <SignupPage /> to that, This is wrong. A true example:

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
)