Mit Redux mit React india

Question

ich auf einer App reagieren-native arbeitete mit erstellt: create-react-native-app

Soweit ich der meisten Top-Level-Komponente sagen kann, ist in der App.js Datei und ich habe den Provider dort importiert und wickelte es um die Top-Level-Komponenten, aber ich bin immer noch die folgenden Fehler aus irgendeinem Grund immer:

ExceptionsManager.js:65 Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(App)".

Was mache ich falsch?

Hier ist mein Code:

import React from 'react'; 
import { StyleSheet, Text, View, FlatList, TextInput, StatusBar, Button,TouchableOpacity } from 'react-native'; 
import { TabNavigator, StackNavigator } from 'react-navigation'; 
import { Constants } from 'expo' 
import { purple, white } from './utils/colors' 
import { saveDeckTitle, getDecks, getDeck, addCardToDeck } from './utils/api' 
import { Provider } from 'react-redux' 
import { createStore } from 'redux' 
import reducer from './reducers' 
import { connect } from 'react-redux' 
import Decks from './components/Decks' 
import NewQuestionView from './components/NewQuestionView' 
import NewDeck from './components/NewDeck' 

const R = require('ramda') 

const store = createStore(reducer) 


const DecksETC = StackNavigator({ 
    Decks: { 
    screen: Decks 
    }, 
    NewDeck: { 
    screen: NewDeck 
    }, 
    NewQuestionView: { 
    screen: NewQuestionView 
    } 
}) 

const NewDeckETC = StackNavigator({ 
    NewDeck: { 
    screen: NewDeck 
    }, 
    Decks: { 
    screen: Decks 
    }, 
    NewQuestionView: { 
    screen: NewQuestionView 
    } 
}) 


const Tabs = TabNavigator({ 

    DecksETC: { 
    screen: DecksETC 
    }, 
    NewDeckETC: { 
    screen: NewDeckETC 
    } 
}); 






class App extends React.Component { 


    render() { 

    console.log('R', R) 

    return (

     <Provider store={store}> 
     <Tabs /> 
     </Provider> 
     // <Tabs /> 

    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    paddingTop: 23, 
    flex: 1, 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
    input: { 
     margin: 15, 
     height: 40, 
     borderColor: '#7a42f4', 
     borderWidth: 1 
    }, 
}); 

function mapStateToProps(state) { 
    console.log('mapStateToProps') 
    debugger 
    return { 
    'sample': 'sample' 
    } 

} 

export default connect(mapStateToProps)(App) 

Answer 1

Das Problem ist, dass App-Komponente noch nichts über das Geschäft nicht kennt, weil der Provider-Komponente ist das, was die Redux Speicher in seine Kinder Komponenten bringt. Die App-Komponente selbst erhält keinen Verweis auf den Store. Wenn Sie also versuchen, eine Verbindung herzustellen, wird der Store nicht gefunden.

Answer 2

Nun, die Funktion verbinden erfordert zwei Funktionen mapStateToProps und mapDispatchToProps als Argumente

dh Export default (mapStateToProps, mapDispatchToProps) verbinden (App)

, wenn Sie Haben Sie keine mapDispatchToProps, dann übergeben Sie einfach null.

heißt Exportstandard verbinden (mapStateToProps, null) (App)

Answer 3

Nun, ich sehe, Sie haben connect-Funktion für die Root-Komponente direkt, das ist ein Muster, das ich nie zuvor gesehen habe. Lassen Sie uns den normalen Weg versuchen, indem Sie eine Root-Komponente erstellen und sie einfach in Provider verwenden. Dann werden Sie untergeordnete Komponenten in diese Root-Komponente übergeben.

Sie werden dann jede untergeordnete Komponente in eine neue Datei trennen. In jeder Datei verwenden Sie connect(), um den Redux-Speicher an diese Komponente zu übergeben. Das ist das übliche Muster, das ich in vielen Projekten sehe. Und dieses Muster wird Ihnen helfen, verwirrende Situationen wie oben zu vermeiden!