Магазин Redux не обновляется после диспетчеризации действия

Привет всем Я новичок в react и работаю над проектом последнюю неделю Я пытаюсь создать этот логин для django rest framework используя react и redux toolkit.

Как я понимаю, создатели действий в redux создают действия, которые затем передаются редукторам для изменения глобального состояния. Если это так, то почему мой создатель действия для входа в систему не сохраняет токены доступа и обновления в хранилище!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Ниже приведен мой код.

--Login.js ---Здесь происходит большая часть логики входа в систему и используется создатель действия для входа.

import { useState } from "react"
import {useDispatch, useSelector} from "react-redux"
import {login} from '../features/auth/authSlice'
import axios from "axios"
const Login = () => {
    const userToken = useSelector((state)=>state.auth)
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    const dispatch = useDispatch()
    

    const authenticate = async ()=>{
        // const resp = await axios.post('http://localhost:8000/auth/login', {formData})
        const resp = await fetch('http://localhost:8000/auth/login', {
            method: 'POST',
            headers:{
                'Content-Type': 'application/json'
            },
            body:JSON.stringify({username:username, password:password})
        })
        const data = await resp.json()
        console.log(data);
        dispatch(login({
            accessToken: data.access,
            refreshToken: data.refresh
        }))
        return data
        
    }
    

    const handleSubmit = (e) =>{
        e.preventDefault()
        console.log(username, password);
        // authenticate().then((data)=>{ }) 
        authenticate()
        setTimeout(()=>{
            console.log(userToken);
            
        }, 3000)
        console.log(userToken);
        
    }
    return ( 
        <div>
        <h1>Login</h1>
        <div className="Auth-form-container">
        <form className='Auth-form' onSubmit={handleSubmit}>
            <div className="Auth-form-content">
                <h2 className='Auth-form-title'>Login SSl Test</h2>
                <div className="form-group mt-3">
                    <label>Username</label>
                    <input
                    type="text"
                    className="form-control mt-1"
                    placeholder="Enter username"
                    value={username}
                    onChange={(e)=>setUsername(e.target.value)}
                    />
                </div>
                <div className="form-group mt-3">
                    <label>Password</label>
                    <input
                    type="password"
                    className="form-control mt-1"
                    placeholder="Enter password"
                    value={password}
                    onChange={(e)=>setPassword(e.target.value)}
                    />
                </div>
                <div className="d-grid gap-2 mt-3">
                    <button type="submit" className="btn btn-primary">
                    Submit
                    </button>
                </div>
            </div>
        </form>
    </div>
    </div>
    );
}
 
export default Login;

--AuthSlice.js ---Мой кусочек инструментария redux для аутентификации

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

const initialState = {
    accessToken: null,
    refreshToken: null
}


const authSlice = createSlice({
    name:'auth',
    initialState,
    reducers:{
        login:(state, action)=>{            
            state.accessToken = action.payload.accessToken
            state.refreshToken = action.payload.refreshToken
        },
        logout:(state, action)=>{
            state.accessToken = ''
            state.refreshToken = ''
        }
    }
});

export const {login, logout} = authSlice.actions
export default authSlice.reducer

Заранее спасибо, я действительно бился головой об этот вопрос. Любая помощь приветствуется, но нам нужны реальные ответы, lol.

Я очень заблудился здесь, все выглядит хорошо для меня, просто не знаю, почему, когда я пытаюсь получить доступ к состоянию хранилища после входа в систему, токены не находятся там

Вернуться на верх