Ошибка в реакции-нативной с expo: не удалось найти «store» в контексте «Connect (App)» - PullRequest
Новая
       14

Ошибка в реакции-нативной с expo: не удалось найти «store» в контексте «Connect (App)»

0 голосов
/ 26 марта 2019

Я создаю свое первое собственное приложение реагировать, и у меня возникла проблема с подключением к магазину редукса (у меня пока нет большого опыта работы с редуксом).Я использую выставку.

Ошибка:

Инвариантное нарушение: не удалось найти «store» в контексте «Connect (App)».Либо оберните корневой компонент в a, либо передайте пользовательский поставщик контекста React соответствующему получателю контекста React в Connect (App) в параметрах подключения.

Эта ошибка находится по адресу: в Connect (App) (вwithExpoRoot.js: 22) (...)

Вот мой код:

Не могли бы вы помочь?

// App.js

import React, { Component } from "react";
import AppStackNav from "./navigators/AppStackNav";
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux';
import guestsReducer from "./reducers/GuestsReducer";

const store = createStore(guestsReducer);

class App extends Component {
    constructor(props) {
        super(props);
    }

    addGuest = (index) => {
        // ...
    }

    render() {
        return (
            <Provider store={store}>
                <AppStackNav
                    screenProps={{
                        currentGuests: this.state.currentGuests,
                        possibleGuests: this.state.possibleGuests,
                        addGuest: this.addGuest
                    }}
                />
            </Provider>
        )
    }
}

const mapStateToProps = state => {
    return {
        currentGuests: this.state.current,
        possibleGuests: this.state.possible,
        addGuest: this.addGuest
    };
}

export default connect(mapStateToProps)(App);


// GuestsReducer.js

import { combineReducers } from 'redux';

const INITIAL_STATE = {
    current: 10,
    possible: [
        'Guest1',
        'Guest2',
        'Guest3',
        'Guest4',
    ],
};

const guestsReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        default:
            return state
    }
};

export default combineReducers({
    guests: guestsReducer,
});

// AppStackNav.js

import { createStackNavigator, createAppContainer } from "react-navigation";
import Home from "../screens/Home";
import Dashboard from "../screens/Dashboard";
import Project from "../screens/Project";
import Placeholder from "../screens/Placeholder";

const AppStackNav = createStackNavigator({
    // ...
});

export default createAppContainer(AppStackNav);

Ответы [ 2 ]

1 голос
/ 26 марта 2019

Первый выпуск 

const mapStateToProps = ({ guests }) => {
        return {
            currentGuests: guests.current,
            possibleGuests: guests.possible
        };
      }

Второй выпуск

Вы подключаете хранилище редуксов к компоненту верхнего уровня, который является компонентом App... а затем используйте connect и mapStateToProps для доступа к redux store в children этого компонента верхнего уровня (приложения) ... Я имею в виду, что вы подключаете свой магазин через mapStateToProps к своему AppStackNav компонентуне App компонент 

const AppStackNav = ({ currentGuests, possibleGuests }) => {
    const Stack = createStackNavigator({...});
    return <Stack />;
};

const mapStateToProps = ({ guests }) => {
    return {
        currentGuests: guests.current,
        possibleGuests: guests.possible
    };
  }

// react-navigation v2 is needed for this to work:
export default connect(mapStateToProps)(AppStackNav);

App.js 

class App extends Component {
    constructor(props) {
        super(props);
    }

    addGuest = (index) => {
        // ...
    }

    render() {
        return (
            <Provider store={store}>
                <AppStackNav />
            </Provider>
        )
    }
}

export default App;
0 голосов
/ 26 марта 2019

вы не можете использовать ключевое слово "this" вне класса, так как он не сможет понять контекст для этого конкретного метода.

вам нужно просто удалить ключевое слово this из mapStateToProps

как это: 

const mapStateToProps = state => {
    return {
        currentGuests: state.current,
        possibleGuests: state.possible
    };
}
...