I am trying to make a login functionality here. I am using react as a front end and django rest framework as a backend. But this code is saying login is not defined. Though I make a userActions where I defined login. Please help me out, someone.

import React, {useEffect, useState} from 'react'
import {useDispatch, useSelector} from 'react-redux'
import {Link, useLocation} from 'react-router-dom'

function LoginPage({ history}) {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    
    const dispatch = useDispatch()

    const location = useLocation()
    const redirect = location.search ? location.search.split('=')[1] : '/'
    
    const userLogin = useSelector(state => state.userLogin)
    const {error, loading, userInfo} = userLogin

    useEffect(() => {
        if(userInfo){
            history.push(redirect)
        }
    },[history, userInfo, redirect])

    const submitHandler = (e) => {
        e.preventDefault()
        dispatch(login(email, password))
    }
    
  return (
    <div>
        <h2>SIGN IN</h2>
    
        <form onSubmit={submitHandler}>
            <div>
                <label htmlFor='username'>Username:</label>
                <input 
                    type='email'
                    value={email}
                    placeholder="Enter Email"
                    onChange={(e) => setEmail(e.target.value)}
                />
            </div>
            <div>
                <label htmlFor='password'>Password:</label>
                <input 
                    type='password'
                    value={password}
                    placeholder="Enter Password"
                    onChange={(e) => setPassword(e.target.value)}
                />
            </div>
            <button className='signin' type='submit'>Sign In</button>
            <p>Are you new to this Website?</p>
            <Link to={redirect ? `/register?redirect=${redirect}` : '/register'}>Sign Up</Link>
        </form>
    </div>
  )
}

export default LoginPage

Here is my userActions file below:

import axios from 'axios'

import {
    USER_LOGIN_REQUEST,
    USER_LOGIN_SUCCESS,
    USER_LOGIN_FAIL,

    USER_LOGOUT,

} from '../constants/userConstants'

export const login = (email, password) => async (dispatch) => {
    try{
        dispatch({
            type: USER_LOGIN_REQUEST
        })

        const config = {
            headers:{
                'Content-type' : 'application/json'
            }
        }

        const {data} = await axios.post(
            '/api/users/login/', 
            {'username' : email, 'password': password},
            config
        )

        dispatch({
            type: USER_LOGIN_SUCCESS,
            payload: data
        })

        localStorage.setItem('userInfo', JSON.stringify(data))

    } catch (error) {
        dispatch ({
            type: USER_LOGIN_FAIL,
            payload: error.response && error.response.data.detail
                ? error.response.data.detail
                : error.message
        })
    }
}

userReducers below:

import {
    USER_LOGIN_REQUEST,
    USER_LOGIN_SUCCESS,
    USER_LOGIN_FAIL,

    USER_LOGOUT,

} from '../constants/userConstants'


const userInfoFromStorage = localStorage.getItem('userInfo') ?
  JSON.parse(localStorage.getItem('userInfo')) : null

const initialState = {
    userLogin : {userInfo: userInfoFromStorage}
  }

export const userLoginReducer = (state = initialState, action) => {
    switch(action.type) {
        case USER_LOGIN_REQUEST:
            return { loading: true }
 
        case USER_LOGIN_SUCCESS:
            return { loading: false, userInfo: action.payload }

        case USER_LOGIN_FAIL:
            return { loading: false, error: action.payload }

        case USER_LOGOUT:
            return {}

        default:
            return state
    }
}

and store:

import { configureStore } from '@reduxjs/toolkit'
import { postListReducer, postDetailsReducer } from './reducers/postReducers'
import { userLoginReducer } from './reducers/userReducers'

const store = configureStore({
  reducer: {
    postList : postListReducer,
    postDetails : postDetailsReducer,
    userLogin : userLoginReducer,
  },
})

export default store

CodePudding user response：

You forgot to import the action from your redux actions on the LoginPage component. where it should be imported at the top level

import React, {useEffect, useState} from 'react'
import {useDispatch, useSelector} from 'react-redux'
import {Link, useLocation} from 'react-router-dom'
import {login}  from "../your file directory for login action"  // here import it.

function LoginPage({ history}) {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    
    const dispatch = useDispatch()

    const location = useLocation()
    const redirect = location.search ? location.search.split('=')[1] : '/'
    
    const userLogin = useSelector(state => state.userLogin)
    const {error, loading, userInfo} = userLogin

    useEffect(() => {
        if(userInfo){
            history.push(redirect)
        }
    },[history, userInfo, redirect])

    const submitHandler = (e) => {
        e.preventDefault()
        dispatch(login(email, password))
    }
    
  return (
    <div>
        <h2>SIGN IN</h2>
    
        <form onSubmit={submitHandler}>
            <div>
                <label htmlFor='username'>Username:</label>
                <input 
                    type='email'
                    value={email}
                    placeholder="Enter Email"
                    onChange={(e) => setEmail(e.target.value)}
                />
            </div>
            <div>
                <label htmlFor='password'>Password:</label>
                <input 
                    type='password'
                    value={password}
                    placeholder="Enter Password"
                    onChange={(e) => setPassword(e.target.value)}
                />
            </div>
            <button className='signin' type='submit'>Sign In</button>
            <p>Are you new to this Website?</p>
            <Link to={redirect ? `/register?redirect=${redirect}` : '/register'}>Sign Up</Link>
        </form>
    </div>
  )
}

export default LoginPage

CodePudding user response：

From what i'm seeing here you are not importing the login method!

import { login } from '../path-to-action/userActions';