我正在嘗試在我的React Native應用程序中集成Redux。我收到錯誤 「無論是在上下文或道具‘無法在上下文或道具中找到「商店」React Native
我的代碼如下’找不到」 店:
index.js
import { AppRegistry, View } from 'react-native'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import { reducer } from './containers/intro/introRedux'
const store = createStore(reducer);
import App from './App'
const AppWithStore =() => (
<Provider store={store}>
<App />
</Provider>
)
AppRegistry.registerComponent('App',() => AppWithStore)
App.js
//Components & Dependencies
import React, { Component } from 'react';
import { TextInput, Picker, TouchableOpacity, Image, AppRegistry, StyleSheet, Text, View } from 'react-native';
import Swiper from 'react-native-swiper';
import { connect } from 'react-redux'
import { actionCreators } from './containers/intro/introRedux'
const mapStateToProps = (state) => ({
todos: state.todos,
})
//Styles
var introStyle = require('./containers/intro/styles');
class App extends Component {
profile = {
gender: "Female",
heightUnit: "cm",
weightUnit: "kg"
}
saveProfile() {
alert(JSON.stringify(this.profile));
}
render() {
return (
<Swiper ref={(component) => { this.swiper = component; }} dotColor='#2A2D2E' activeDotColor='#FFF' showsButtons={false} loop={false}>
<View style={introStyle.slide1}>
<Image source={require('./images/logo.png')} />
<Text style={introStyle.header}>Build Muscle, Burn Fat & Get Stronger</Text>
<TouchableOpacity style={introStyle.nextButton} onPress={() => this.swiper.scrollBy(1)}>
<Text style={introStyle.nextButtonText}>Next</Text>
</TouchableOpacity>
</View>
<View style={introStyle.slide2}>
<View style={introStyle.wrapper}>
<Text style={introStyle.header}>Let's setup your profile</Text>
<Text style={introStyle.subHeader}>Tell us a little about yourself first</Text>
<Picker
selectedValue={this.profile.gender}
mode='dropdown'
style={[introStyle.dropdown, introStyle.genderDropdown]}>
<Picker.Item label="Male" value="Male" />
<Picker.Item label="Female" value="Female" />
</Picker>
<TextInput
style={introStyle.textInput}
underlineColorAndroid='#FFF'
placeholder='Age'
keyboardType='numeric'
maxLength={2}
value={this.profile && this.profile.age}
/>
<View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
<TextInput
style={introStyle.textInput}
underlineColorAndroid='#FFF'
placeholder='Height'
keyboardType='numeric'
maxLength={3}
value={this.profile && this.profile.height}
/>
<Picker
mode='dropdown'
style={introStyle.dropdown}
selectedValue={this.profile.heightUnit}
>
<Picker.Item label="cm" value="cm" />
<Picker.Item label="inch" value="inch" />
</Picker>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
<TextInput
style={introStyle.textInput}
underlineColorAndroid='#FFF'
placeholder='Weight'
keyboardType='numeric'
maxLength={3}
value={this.profile && this.profile.weight}
/>
<Picker
mode='dropdown'
style={introStyle.dropdown}
selectedValue={this.profile.weightUnit}
>
<Picker.Item label="kg" value="kg" />
<Picker.Item label="lb" value="lb" />
</Picker>
</View>
<TouchableOpacity style={introStyle.nextButton} onPress={() => this.saveProfile()}>
<Text style={[introStyle.nextButtonText, { textAlign: 'center' }]}>Let's go!</Text>
</TouchableOpacity>
</View>
</View>
</Swiper>
);
}
}
export default connect(mapStateToProps)(App)
introRedux.js
const initialState = {
todos: ['Click to remove', 'Learn React Native', 'Write Code', 'Ship App'],
}
export const actionCreators = {
UPDATE_GENDER: 'UPDATE_GENDER',
};
export const reducer = (state = initialState, action) => {
const {profile} = state
const {type, payload} = action
switch (type) {
case types.ADD: {
return {
...state,
todos: [payload, ...todos],
}
}
case types.REMOVE: {
return {
...state,
todos: todos.filter((todo, i) => i !== payload),
}
}
}
return state
}
爲什麼應用程序無法從提供商那裏找到商店?我很茫然。
編輯:路過商店直接作用:
import { AppRegistry, View } from 'react-native'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { reducer } from './containers/intro/introRedux'
const store = createStore(reducer)
// Import the App container component
import App from './App'
// Pass the store into the app container
const AppWithStore =() => <App store={store} />
AppRegistry.registerComponent('App',() => AppWithStore)
「應用程序」 不使用連接到導出組件如果我通過商店直接
是有關的錯誤信息?我無法發現任何特別錯誤的東西。 – nbkhope
你可以做的一件事就是用一個簡單的組件代替提供者內的應用程序,只顯示一個Hello World。如果這有效,那麼問題出現在App中。 – nbkhope
@nbkhope如果我直接將商店直接傳遞到應用程序應用程序工作正常,請參閱我的更新,任何想法爲什麼發生這種情況? – Hirvesh