Question

我设法在我的功能组件中使用2个 useEffect 钩子来完成这项工作”：

  useEffect(() => {
    console.log('LOAD_FROM_LOCALSTORAGE')
    loadFromLocalStorage({ dispatch })
  }, [])

  useEffect(
    () => {
      console.log('SAVE_TO_LOCALSTORAGE')
      saveToLocalStorage(state)
    },
    [state]
  )

关于如何使用 localStorage 和 useState 挂钩使用egghead.io tutorial，但是我正在使用 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
  }
}

Answer 1

我认为合并这两种效果没有什么好处-它们现在很干净并且可以做应做的事情，但是您可以尝试类似的操作

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

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

有没有一种方法可以在一个useEffect钩子中加载fromFromLocalStorage和saveToLocalStorage？

1 个答案: