无法在提供程序文件中获取 redux 状态

Question

我正在尝试在与我使用提供程序的文件相同的文件中获取 redux 状态值。

由于某种原因，它似乎找不到值。

const MyApp = ({ Component, pageProps }: AppProps)=> {

  const isDark = useSelector<ThemeState, ThemeState["isDark"]>(state => state.isDark)
  const dispatch = useDispatch()

  return (
    <>
    <Provider store={ThemeStore}>
      <div className={isDark ? 'dark' : 'white'}>
      <Player />
      <Component {...pageProps} />
      </div>
      </Provider>
    </>
  )
}
export default MyApp

这给出了一个错误：

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

在我的导航组件中使用相同的 useSelector 和 dispatch 时，它确实有效。

知道如何让它在 _app.js 文件中工作吗？

Answer 1

你不能像这样在提供者中使用状态，你需要至少更深一层，或者只使用你直接传递给状态的东西，而不是调用useSelector，试试这个：

function Child({ children }) {
  const isDark = useSelector<ThemeState, ThemeState["isDark"]>(state => state.isDark)

  return <div className={isDark ? "dark" : "white"}>{children}</div>;
}

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <Provider store={ThemeStore}>
      <Child>
        <Player />
        <Component {...pageProps} />
      </Child>
    </Provider>
  );
};
export default MyApp;