コンテキストまたは小道具に「ストア」が見つかりませんでした。React Native

Question

Reactネイティブアプリに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" 
    } 
}