javascript - React Native，Redux 找不到上下文

Question

我是 redux 的新手，并试图掌握它的概念。当 redux 寻找上下文值时，我收到错误。我确信我将整个应用程序包装在提供程序中，但仍然不明白为什么它仍然会导致以下错误:

错误:找不到react-redux上下文值；请确保组件包装在 Provider 中

这是我的 themeReducer.js 文件:

const initialState = {
    theme: "dark",
}

const themeReducer = (state = initialState, action) => {
    if (action.type === "changeTheme"){
        if (state.theme === "dark"){
            return {theme: "light"};
        } else {
            return {theme: "dark"}
        }
    }
    return state
}

export default themeReducer

这是我的商店的index.js:

import {createStore, combineReducers} from 'redux';
import themeReducer from './reducers/themeReducer'

const rootReducer = combineReducers({
    theme: themeReducer
})

const store = createStore(rootReducer)

export default store

最后，这是我用提供者包装根组件以访问状态的地方:

import "react-native-gesture-handler";
import React from "react";
import { ThemeProvider } from "styled-components";
import AppNavContainer from "./src/navigations/index";
import { Provider } from "react-redux";
import { useSelector } from "react-redux";
import store from "./src/store/index"


export default function App() {
  const currentTheme = useSelector(state => state.theme)
  return (
    <Provider store={store}>
      <ThemeProvider theme={{ mode: {currentTheme} }}>
        <AppNavContainer />
      </ThemeProvider>
    </Provider>
  );
}

我正在使用样式化组件来访问主题值，以更改自定义组件的背景颜色。我对 redux 的理解是，如果我将所有内容都包装在 Provider 下，我就可以在该 Provider 下的任何位置访问该状态。我做错什么了吗？任何意见都表示赞赏

Answer 1

return (
    <Provider store={store}>
      <ThemeProvider theme={{ mode: {currentTheme} }}>
        <AppNavContainer />
      </ThemeProvider>
    </Provider>
  );

存储(以及 useSelector)仅适用于距离 Provider 更远的组件树中的组件。因此，在 ThemeProvider 中、在 AppNavContainer 中以及 AppNavContainer 内的任何内容中。您无法在 App 中使用 useSelector，因为在 App 的树上不存在 Provider。

您可能希望将此组件拆分为多个组件。例如:

export default function App() {
  return (
    <Provider store={store}>
      <ThemeWrapper />
    </Provider>
  );
}

function ThemeWrapper () {
  const currentTheme = useSelector(state => state.theme)
  return (
    <ThemeProvider theme={{ mode: {currentTheme} }}>
      <AppNavContainer />
    </ThemeProvider>
  );
}