无法在上下文或道具中找到“商店”React Native

Question

我正在尝试在我的React Native应用程序中集成Redux。我收到错误 “无论是在上下文或道具‘

我的代码如下’找不到” 店：

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 &amp; 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) 

“应用程序” 不使用连接到导出组件如果我通过商店直接

Answer 1

更换

const AppWithStore =() => (
    <Provider store={store}> 
     <App /> 
    </Provider> 
) 

带有一个类的组件：

class AppWithStore extends React.Component { 
    render() { 
    return (
     <Provider store={store}> 
     <App /> 
     </Provider> 
    ) 
    } 
} 

功能组件不保持状态。我认为AppRegistry.registerComponent需要你使用类组件。

EDIT2

{ 
    "name": "vtapered", 
    "version": "0.1.0", 
    "private": true, 
    "devDependencies": { 
    "react-native-scripts": "1.3.1", 
    "jest-expo": "~20.0.0", 
    "react-test-renderer": "16.0.0-alpha.12" 
    }, 
    "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", 
    "scripts": { 
    "start": "react-native-scripts start", 
    "eject": "react-native-scripts eject", 
    "android": "react-native-scripts android", 
    "ios": "react-native-scripts ios", 
    "test": "node node_modules/jest/bin/jest.js --watch" 
    }, 
    "jest": { 
    "preset": "jest-expo" 
    }, 
    "dependencies": { 
    "expo": "^20.0.0", 
    "react": "16.0.0-alpha.12", 
    "react-native": "^0.48.0", 
    "react-native-swiper": "^1.5.10", 
    "react-redux": "^5.0.6" 
    } 
}