React Hooks-UseEffect内的AppAction状态更新中的调度动作

问题描述

我需要我的（大屏幕）应用程序/ AppContext才能根据用户的滚动位置知道何时显示NavBar。

（小屏幕将显示带有菜单托盘的汉堡菜单）

AppContext.js

const initialState = {
  state: { 
    showNavBar: false
    // more state
  },dispatch: () => {},// should this be generic in order to dispatch any action?
}

export const AppContext = createContext(initialState)

export const AppContextProvider = ({ children }) => {
  const [state,dispatch] = useReducer(reducer,initialState) // --> seems ok

  return (
    <AppContext.Provider value={{ state,dispatch }}>
      {children}
    </AppContext.Provider>
  )
}

actions.js

export const SHOW_NAV_BAR = 'SHOW_NAV_BAR'
export const showNavBar = isShow => ({ type: SHOW_NAV_BAR,data: isShow })

reducers.js

export const reducer = (state,action) => {
  const { type,data } = action
  switch (type) {
    case SHOW_NAV_BAR:
      return { ...state,showNavBar: data }
    default:
      return state
  }
}

当前，该应用只需要设置一次showNavBar（这可能会更改），其他组件/页面则需要了解它，尤其是在样式设计方面，因此需要一个共享的上下文。

我正在使用Intersection Observer API来检测用户在useEffect调用中的滚动位置。

const App = () => {
  const { dispatch,state } = useContext(AppContext) // --> seems right

  let target
  const handleIntersect = (entries,observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        dispatch(showNavBar(true))
        observer.unobserve(entry.target)
      }
    })
  }

  useEffect(() => {
    const options = { ... }
    const observer = new IntersectionObserver(handleIntersect,options)

    target = document.getElementById('community')
    target && observer.observe(target)

    return () => observer.disconnect()
  },[])

  return (
    <AppContextProvider>
      <Layout>
        <Intro />
        <Community id="community"/>
        <Members />
      </Layout>
    </AppContextProvider>
  )
}

问题是当我从AppContext解构dispatch函数时，更新AppContext的操作不起作用。

我想了解为什么会这样。

我发现这个article提到：

您的useReducer调用不在函数内部，因此不会附加到该函数。

但是AppContext的目的不是将分发传递到需要的地方吗？因此，您可以将所需的任何操作分派到使用该AppContext的不同功能组件中？

在我的App组件中，我尝试直接调度调用useReducer的操作：

const [state,initialState)

这可以更新AppContext，但是新的问题是状态更改不会传播到其他组件。这样分解结构时，状态是否对组件来说局部？

我真的不明白这里发生了什么以及这些钩子如何工作。

我不断浏览文档，并且非常感谢您提供一些指导。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）