State is undefined in Redux when I use it for authentication

Question

I am using React as a frontend and consuming my REST Api which is built in django-rest-framework. I am using simplejwt for token generation and authentication. Upon calling my token endpoints, I receive the tokens and I want to store the user information along the tokens inside my redux store, but I am unable to do that for some reason. I get "undefined" when I try accessing my store for user information.

This is my Login.js

function Login() {

    const dispatcher = useDispatch();
    
    const [login, setlogin] = useState({
        username: '',
        password:'',
    })
    
    return (
            <div className="col-8">

                <div class="form-group">
                    <label for="username">Username</label>
                    <input 
                        onChange={ (e) => setlogin( {...login, username:e.target.value} )} 
                        type="text" 
                        class="form-control" 
                        id="username" 
                        aria-describedby="usernameHelp"
                        value={login.username}>

                        </input>
                    <small id="usernameHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>

                <div class="form-group">
                    <label for="password">Password</label>
                    <input 
                        onChange={ (e) => setlogin( {...login, password:e.target.value} )}    
                        type="password" 
                        className="form-control" 
                        id="password"
                        value={login.password}>
                        </input>
                </div>

                <button 
                    class="btn btn-primary"
                    onClick={()=>{dispatcher(login_request(login))}}>Submit
                </button>

            </div>
    )
}

export default Login

This is my authActions.js

import {
    LOGIN,
    LOGOUT
} from './authTypes'

import axios from 'axios';

// called by login_request
export const login = (data) => {
    console.log('login action called with data :', data)
    return {
        type: LOGIN,
        payload: data,
    }
}

export const logout = () => {
    return{
        type: LOGOUT,
    }
}

// called in Login.js with date = { username, password }
export const login_request = (data) => {
    var userInfo = {}
    return(dispatch) => {
        axios.post('http://127.0.0.1:8000/api/token/',{
            'username': data['username'],
            'password': data['password'],
        })
        .then(res => {
            
            userInfo['username'] = res.data['username']
            userInfo['first_name'] = res.data['first_name']
            userInfo['last_name'] = res.data['last_name']
            userInfo['groups'] = res.data['groups']
            let config = {
                headers: {
                    // 'Access-Control-Request-Headers' : '*',
                    'Authorization': 'Bearer' + ' ' + res.data['access']
                }
            }
            axios.post('http://127.0.0.1:8000/api/token/refresh/',{
                'refresh':res.data['refresh']
            }, config)
            .then(res => {
                userInfo['access'] = res.data['access']
            }).catch(err => console.log(err))

        }).catch(err => console.log(err))
        dispatch(login(userInfo))
    }
}

And here is my authReducer.js

import {
    LOGIN,
    LOGOUT
} from './authTypes'

const reducer = (state={}, action) => {

    switch(action.type){

        case LOGIN:
            return {...state, 
                username: action.payload['username'],
                first_name: action.payload['first_name'],
                last_name: action.payload['last_name'],
                groups: action.payload['groups'],
                access: action.payload['access'],
            }

        case LOGOUT:
            return state
            
        default:
            return state

    }
}

export default reducer

Store.js

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import logger from 'redux-logger'

import rootReducer from './index';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
    rootReducer,
    composeEnhancers(applyMiddleware(thunk, logger)) 
    );

export default store;