Как написать асинхронный запрос к local storage?

Question

[chvertkos]

Здравствуйте, создал приложение с формой регистрации/авторизации на React, состояния хранятся в redux. В зависимости от того есть ли в localStorage поля Name и password хочу обновлять состояние заголовка формы с "Registration" на "Login". Сейчас это происходит только после перезагрузки страницы, как сделать так, чтобы элемент ререндерился?
P.S Прошу не обращать внимания на захардкоженную запись в LS, а так же к отсутствию регулярных выражений для email и password, я понимаю к каким ошибкам и проблемам это может привести, сейчас мне интересно как решить проблему выше.
STORE.JS ->

import { configureStore } from "@reduxjs/toolkit";
import { formReducer } from "./auth-feature/form-slice";

export const store = configureStore({
    reducer:{
        form: formReducer
    },
    devTools: true,
})

FORM-SLICE.JS ->

import { createSlice } from "@reduxjs/toolkit"

const initialState = {
    email: '',
    password: '',
    happening : 'Registration'
}
const formSlice = createSlice({
    name: '@@form',
    initialState,
    reducers: {
        setEmail : (state,action) =>  { 
                state.email = action.payload
            },
        setPassword: (state,action) => {
                state.password = action.payload
            },
        setHappening: (state) => {
                if(localStorage.getItem('email') && localStorage.getItem('password') === null) {
                    return initialState
                }
                if(localStorage.getItem('email') && localStorage.getItem('password') !== null)
                return void(state.happening = 'Login') 
        }
        }
    })
export const selectEmail = state => state.form.email
export const selectPassword = state => state.form.password
export const selectHappening = state => state.form.happening

export const {setEmail,setPassword,setHappening} = formSlice.actions
export const formReducer = formSlice.reducer

FORM.JSX ->

import { useEffect } from "react"
import { useDispatch } from "react-redux"
import { useSelector } from "react-redux"
import { selectEmail, selectHappening, selectPassword, setEmail, setHappening, setPassword } from "../auth-feature/form-slice"

export const Form = () => {
    const dispatch = useDispatch()
    const state = useSelector(state => state)
    const happening = useSelector(selectHappening)
    const email = useSelector(selectEmail)
    const password = useSelector(selectPassword)
    const handlerEmail = (event) => {
        if(event.target.value.length > 10){
            dispatch(setEmail(event.target.value))
        }
    }
    const handlerPassword = (event) => {
            dispatch(setPassword(event.target.value >= 10))
        }
    const putInLocalStorage = () => {
        localStorage.setItem('email',email)
        localStorage.setItem('password',password)
    }
    useEffect(() => {
        dispatch(setHappening())
        console.log(happening)
    }, [happening,dispatch] )
    return(
        <>
            <div className="login-box">
                <h2>{happening}</h2>
                <form>
                    <div className="user-box">
                    <input type="email" name="" required="" onChange={handlerEmail}/>
                    <label>Email</label>
                    </div>
                    <div className="user-box">
                    <input type="text" name="" required="" onChange={handlerPassword}/>
                    <label>Password</label>
                    </div>
                    <a href="#" onClick={putInLocalStorage}>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        Войти
                    </a>
                </form>
            </div>
        </>
    )
}

Answer 1

[Иван Спасов]

TL;DR

function get(key) {
  const value = localStorage.get(key);
  return Promise.resolve(value);
}

async () => { ... await get("key"); ... }

Comments

[chvertkos]

Здравствуйте, спасибо за ответ, подскажите еще пожалуйctа, как это реализовать в useEffect вместе с dispatch?

Answer 2

[zkrvndm]

Существует альтернатива для localStorage, речь о IndexedDB. Для него в свою очередь существует удобная обертка - localForage, где все вызовы как раз асинхронные, на промисах.

Присмотритесь к нему, очень рекомендую:
https://habr.com/ru/company/nordavind/blog/212709/
https://html5.by/blog/localforage/