Есть ли способ загрузить FromLocalStorage и saveToLocalStorage в один хук useEffect? - PullRequest
0 голосов
/ 27 декабря 2018

Мне удается выполнить эту работу с помощью 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
  }
}

1 Ответ

0 голосов
/ 13 марта 2019

Не думаю, что есть смысл объединять эти 2 эффекта - они чисты и делают то, что должны были сделать, но вы можете попробовать что-то подобное

const [state, dispatch] = useReducer(reducerFunction, {});

useEffect(
    () => {
        // if there is no state 
        if(!Object.keys(state).length) {
            loadFromLocalStorage({ dispatch })
            return;
        }
        saveToLocalStorage(state)
    },
    [state]
)
...