Не удалось найти «store» в контексте «Connect (Login)», и я не смог найти решение для этого, вот мой код

Question

//App.js

import React, { Component } from 'react';
import { StyleSheet, Platform, Image, Text, View } from 'react-native';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers/index';
import Profile from './Screens/Profile';
import Signup from './Screens/Signup';
import Login from './Screens/Login';

const middleware = applyMiddleware(thunkMiddleware);
const store = createStore(rootReducer, middleware);

import { ReactReduxContext } from "react-redux";


const Switch = createSwitchNavigator({
    Login: Login,
    Profile: Profile,
    Signup: Signup
}, {
    initialRouteName: 'Login',
});

export default createAppContainer(Switch)

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



//Login.js

import React from 'react';
import Firebase from '../config/firebase';
import Signup from '../Screens/Signup';
import Profile from '../Screens/Profile';
import { createSwitchNavigator } from 'react-navigation';
import { View, TextInput, StyleSheet, TouchableOpacity, Text, Button } from 'react-native';
import ReactReduxContext from 'react-redux';
import { bindActionCreators, applyMiddleware, createStore, Provider } from 'redux';
import { connect } from 'react-redux';
import { updateEmail, updatePassword, login } from '../actions/user';
import thunkMiddleware from 'redux-thunk';


function mapDispatchToProps(dispatch) {
    return bindActionCreators({ login, updateEmail, updatePassword }, dispatch)
}

const mapStateToProps = state => {
    return {
        user: user.state
    }
}

class Login extends React.Component {
    handle = () => {
        this.props.login()
        this.props.navigation.navigate('Profile')
    }

    state = {
        email: '',
        password: ''
    }

    render() {
        return (
            <Provider>
                <View style={styles.container}>
                    <TextInput
                        style={styles.inputBox}
                        value={this.state.email}
                        onChangeText={email => this.props.updateEmail(email)}
                        placeholder='Email'
                        autoCapitalize='none'
                    />
                    <TextInput
                        style={styles.inputBox}
                        value={this.state.password}
                        onChangeText={password => this.props.updatePassword(password)}
                        placeholder='Password'
                        secureTextEntry={true}
                    />
                    <TouchableOpacity style={styles.button} onPress={this.handleLogin}>
                        <Text style={styles.buttonText}>Login</Text>
                    </TouchableOpacity>
                    <Button title="Don't have an account yet? Sign up"
                        onPress={() => this.props.navigation.navigate('Signup')} />
                </View>
            </Provider>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    },
    inputBox: {
        width: '85%',
        margin: 10,
        padding: 15,
        fontSize: 16,
        borderColor: '#d3d3d3',
        borderBottomWidth: 1,
        textAlign: 'center'
    },
    button: {
        marginTop: 30,
        marginBottom: 20,
        paddingVertical: 5,
        alignItems: 'center',
        backgroundColor: '#F6820D',
        borderColor: '#F6820D',
        borderWidth: 1,
        borderRadius: 5,
        width: 200
    },
    buttonText: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#fff'
    },
    buttonSignup: {
        fontSize: 12
    }
})


export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Login);

Answer 1

Чтобы получить доступ к connect HO C, сначала необходимо указать хранилище для дерева пользовательского интерфейса через Provider

. Вы можете сделать это следующим образом:

class App extends React.Component {
    render() {
        return (
            <Provider store={store}> // this is what is required.
                <Switch />
            </Provider>
        )
    }
}

Надеюсь, это поможет. Ура!