Мне удается выполнить эту работу с помощью 2 useEffect хуков в моем функциональном компоненте ":
useEffect(() => {
console.log('LOAD_FROM_LOCALSTORAGE')
loadFromLocalStorage({ dispatch })
}, [])
useEffect(
() => {
console.log('SAVE_TO_LOCALSTORAGE')
saveToLocalStorage(state)
},
[state]
)
Существует egghead.io учебник о том, какиспользуйте localStorage с useState hook, но я использую useContext и useReducer для управления состоянием приложения.
вот мой loadFromLocalStorage Функция:
const loadFromLocalStorage = async ({ dispatch }) => {
try {
const serializedState = await localStorage.getItem('state')
if (serializedState === null) return undefined
const persistedState = await JSON.parse(serializedState)
await dispatch({ type: 'LOAD_FROM_LOCALSTORAGE', persistedState })
} catch (e) {
console.log(e)
return undefined
}
}