使用 useSelector() 时找不到react-redux上下文值

Question

我是新来的反应，并试图理解为什么我会看到这个错误：

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

应用程序.js

export default function App() {
  const selectedNumber = useSelector(selectChosenNumber) // This line causes the error

  function pickedNumberHandler() {
    console.log("called")
  }

  let screen = <StartGameScreen />;

  pickedNumberHandler()

  store.subscribe(pickedNumberHandler)

  return (
    <Provider store={store}>
      <LinearGradient colors={['#4e0329', '#ddb52f']} style={styles.rootScreen}>
        <ImageBackground
          source={require('./assets/images/background.png')}
          resizeMode="cover"
          style={styles.rootScreen}
          imageStyle={{opacity: 0.15}}
        >
          {screen}
        </ImageBackground>
      </LinearGradient>
    </Provider>
  );
}

const styles = StyleSheet.create({
  rootScreen: {
    flex: 1,
  }
})

selectedNumberReducer.ts

export const chosenNumberSlice = createSlice({
  name: "chosenNumber",
  initialState: {
    value: ""
  },
  reducers: {
    pickNumber: (state, action) => {
      state.value = action.payload
    }
  }
})

export const { pickNumber } = chosenNumberSlice.actions
export const selectChosenNumber = state => state.chosenNumber.value;
export default chosenNumberSlice.reducer

我正在尝试监听状态的变化，但似乎无法访问 app.js 中的值。

Answer 1

您需要将逻辑移至应用程序之外。当它说时，please ensure the component is wrapped in a <Provider>这意味着您正在使用的组件useSelector需要位于其中<Provider>，在本例中意味着 App.js。

所以 App.js 应该只包含

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

NewComponent.js 应该包含其余的逻辑。