Reactjs React Hooks-在UseEffect内为AppContext状态更新分派操作

我需要我的（大屏幕）应用程序/

AppContext

知道何时根据用户的滚动位置显示导航栏

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

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>
  )
}

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

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

reducers.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>
  )
}

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

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检测用户在

useffect

调用中的滚动位置

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>
  )
}

const-App=（）=>{
const{dispatch，state}=useContext（AppContext）/-->似乎是对的
让目标
const handleIntersect=（条目、观察者）=>{
entries.forEach（entry=>{
if（输入。isIntersecting）{
调度（显示导航栏（真实））
观察者。未观察者（进入。目标）
}
})
}
useffect（（）=>{
常量选项={…}
const observer=新的IntersectionObserver（handleIntersect，选项）
target=document.getElementById（'社区'）
目标和观察者。观察（目标）
return（）=>observer.disconnect（）
}, [])
返回(
其中提到：

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

但是，
AppContext
的目的不是在需要的地方传递分派吗？这样您就可以在使用该
AppContext
的不同功能组件内部分派所需的任何操作

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

const[state，dispatch]=useReducer（reducer，initialState）

这可以更新
AppContext
，但新的问题是状态更改不会传播到其他组件。当我这样分解组件时，状态是否会成为组件的本地状态

我真的不明白这里发生了什么，这些钩子是怎么工作的

我一直在用文档绕圈子，非常希望能有一些指点