使用React Router时为React应用配置easy-peasy store的正确方法

你遇到的问题核心是useStoreState必须在StoreProvider包裹的组件内部使用，你的App组件里useStoreState写在了StoreProvider的外层，组件渲染时还没注入store上下文，自然找不到subscribe方法。

修正步骤： #

把需要访问store状态的逻辑移到StoreProvider内部的组件中，比如单独抽离路由处理组件：

// 你的store定义保持不变
const store = createStore({
    user: { loggedIn: false },
    adduser: action((state, payload) => {
      state.user = { loggedIn: true, ...payload }
    }),
})

// App组件只负责包裹Provider和Router
const App = () => {
  return (
    <StoreProvider store={store}>
      <BrowserRouter>
        <RouteHandler />
      </BrowserRouter>
    </StoreProvider>
  )
}

// 抽离路由处理组件，放在Provider内部才能正常使用useStoreState
const RouteHandler = () => {
  const user = useStoreState((state) => state.user)
  
  return (
    <Routes>
      <Route path="/" element={!user.loggedIn ? <LoginScreen /> : <Dashboard />} />
      <Route path="/sign-up" element={<SignupScreen />} />
    </Routes>
  )
}

关键说明： #

• 所有easy-peasy的hooks（useStoreState、useStoreActions等）都依赖StoreProvider提供的上下文，必须在它的子组件中调用。
• 拆分组件不仅解决了当前错误，也让代码结构更清晰，后续维护路由逻辑更方便。

内容的提问来源于stack exchange，提问作者James Young