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

Question

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

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

App.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,
}
})

chosenNumberReducer.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

您需要将您的逻辑移出App。当它说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应该包含其余的逻辑。