Uncaught Error: Actions must be plain objects. Use custom middleware

Question

The error seems common and when I made some research I saw that it's mostly due to omission of middlewere (like thunk) or failing to call the dispatch function. Even after trying to put those things in check I keep getting the error

Redux Action

export const signup = (username, email, password, re_password) => async dispatch => {
    const config = {
        headers: {
            'Content-Type': 'application/json'
        }
    };

    const body = JSON.stringify({ username, email, password, re_password });

    try {
    
        const {data} = await axios.post(`${process.env.REACT_APP_API_URL}/api/users/`, body, config);
        
        console.log(body)
        dispatch({
            type: SIGNUP_SUCCESS,
            payload: data
        });
    } catch (error) {
        dispatch({
            type: SIGNUP_FAIL,
            payload: error.response && error.response.data.detail
                ? error.response.data.detail
                : error.message,
        })
    }
};

function RegisterScreen({ signup, isAuthenticated }) {

    const [accountCreated, setAccountCreated] = useState(false);
    const [username, setUsername] = useState([])
    const [email, setEmail] = useState([])
    const [password, setPassword] = useState([])
    const [re_password, setRe_password] = useState([])
    const [message, setMessage] = useState('')


    const dispatch = useDispatch()
    const auth = useSelector(state => state.auth)
    const { error, loading } = auth

    const submitHandler = (e) => {
        e.preventDefault();
        if (password !== re_password) {
            setMessage('Both passwords must be the same')
        } else {
            dispatch(signup(username, email, password, re_password));
            setAccountCreated(true);
        }
    }
    
 
    return (
        <Container className='content auth-container'>
            <div className="auth-header text-center mb-4">
                <h2 className="auth-header">Sign Up</h2>
                <p>Add your deatils to sign up</p>
            </div>
            {message && <Message variant='danger'>{message}</Message>}
            {error && <Message variant='danger'>{error}</Message>}
            {loading && <Loader />}
                    <Form className="auth-form" onSubmit={submitHandler}>
                        <Form.Group className="mb-3" controlId='name'>
                            <Form.Control 
                                className="auth-input search-ppty" 
                                required
                                minLength='6'
                                type="name" 
                                placeholder="Username" 
                                value={username}
                                onChange={(e) => setUsername(e.target.value)}
                                />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId='email'>
                            <Form.Control
                                required 
                                className="auth-input search-ppty" 
                                type="email" 
                                placeholder="Email" 
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                
                                />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId="password">
                            <Form.Control 
                                className="auth-input search-ppty" 
                                type="password" 
                                placeholder="Password" 
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                
                                />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId="passwordConfirm">
                            <Form.Control 
                                className="auth-input search-ppty" 
                                type="password" 
                                placeholder="Confirm Password" 
                                value={re_password}
                                onChange={(e) => setRe_password(e.target.value)}
                                />
                        </Form.Group>
                        <Button type="submit" className="auth-button">Sign Up</Button>
                    </Form>
                    <Row className="p-2">
                        <Col>
                            <div className=""> Already have an account? <Link to="/login">Login</Link></div>
                        </Col>
                        <Col>
                            
                        </Col>
                    </Row>
        </Container>
        
    )
}

export default connect(null, {signup}) (RegisterScreen)

Redux store

import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'

const middleware = [thunk]

const store = createStore(
    reducer, 
    composeWithDevTools(applyMiddleware(...middleware))
    )

export default store

I have spent several hours still can't find where the error is coming from in the code. How do I fix it?

Answer 1

You seem to be mixing two different APIs for Redux: the hooks API and the connect API. When using function components, you don't need connect at all, hooks are enough, so try to remove the last line with connect (export RegisterScreen directly instead), and remove the signup prop (use the imported signup action creator directly).