Сейчас я пытаюсь создать систему входа в React. Я использую React Context и локальное хранилище. Когда я загружаю страницу входа в первый раз, в локальное хранилище передается ключ «пользователь» со значением «undefined». Когда я вставляю правильные данные пользователя в форму и нажимаю кнопку входа в систему, пользовательская клавиша меняет значение на желаемое. Дело в том, что если я обновляю страницу, пользовательский ключ снова становится неопределенным. Код для моего вызова функции контекста и входа представлен ниже.
import React, {createContext, useReducer, useEffect} from 'react'
import UserReducer from './UserReducer'
import axios from 'axios'
const initialState = localStorage.getItem('user') ? localStorage.getItem('user') : ''
export const UserContext = createContext(initialState)
export const UserProvider = props => {
const [state, dispatch] = useReducer(UserReducer, initialState)
useEffect(() => {
console.info(state.user)
localStorage.setItem("user", JSON.stringify(state.user))
}, [state])
// actions
const login = async (username, password) => {
const user = await axios.post("http://localhost:4999/login", {username, password})
dispatch({type: 'LOGIN', payload: user.data})
}
const logout = user => {
dispatch({type: 'LOGOUT', payload: user})
}
return (
<UserContext.Provider value = {{user: state.user, login, logout}}>{props.children}</UserContext.Provider>
)
}
И редуктор:
function UserReducer(state, action) {
switch(action.type) {
case 'LOGIN':
return {
...state,
user: action.payload
}
default:
return state
}
}
export default UserReducer
Вызов функции входа в систему:
const {login} = useContext(UserContext)
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const onSubmit = async (e) => {
e.preventDefault()
await login(email, password)
}
Также, как вы думаете, в моей ситуации лучше использовать хранилище сессий? А какая разница?
Вы проверили локальное хранилище после обновления страницы. Значение данных все еще хранилось в локальном хранилище или нет. В Reducer, я думаю, вам также следует создать еще один случай выхода из системы.