Инвариантное нарушение: не удалось найти «хранилище» ни в контексте, ни в подпунктах «Connect (Books)» - PullRequest
Новая
       18

Инвариантное нарушение: не удалось найти «хранилище» ни в контексте, ни в подпунктах «Connect (Books)»

0 голосов
/ 09 февраля 2020
  • Чтобы легко управлять состоянием приложения в React-Native, мы используем концепцию redux , чтобы у нас были состояния в одном месте, т.е. store .
  • In мой код, я подключил компоненты, которым требуется доступ к хранилищу, чтобы получить / сохранить данные, но получаю сообщение об ошибке.
  • Как новичок в редукции, предоставьте помощь, вот мой код:

Приложение. js: 

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './src/shopping/Home';
import StartScreen from './src/shopping/StartScreen';
import BooksScreen from './src/shopping/Books';
import Electronics from './src/shopping/Electronics';

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Start: StartScreen,
    Elec: Electronics,
    Book: BooksScreen,
  },
  {
    initialRouteName: 'Start',
    defaultNavigationOptions: {
      headerTitle: 'Shopping App',  
    },
  }
);

export default createAppContainer(AppNavigator);

Home. js

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

class Home extends Component {

  render() {
    return (
      <View>
        <Button title="Books"
          onPress={() => { this.props.navigation.navigate('Book') }}>
        </Button>

        <Button title="Electronics"
          onPress={() => { this.props.navigation.navigate('Elec') }}>
        </Button>

      </View>
    );
  }
}

export default Home;

StartScreen. js: 

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Home from './Home';
import store from './store'
import { Provider } from 'react-redux';

class StartScreen extends Component {
  render() {
    return (
      <View>
        <Provider store={store}>
          <Home navigation={this.props.navigation} />
        </Provider>
      </View>
    );
  }
}

export default StartScreen;

Электроника. js: 

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { electronics } from './data'
import Products from './Products'
import { connect } from 'react-redux';

class Electronics extends Component {

  addElectronics(product) {
    console.warn("Electronics Clicked", product)
    this.props.addElec(product)
  }

  render() {
    return (
      <View style={styles.container}>
        <Products product={electronics}
          onClickedItem={(product) => this.addElectronics(product)} />
      </View>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    addElec: (product) => dispatch({
      type: "ADD_PRODUCTS",
      payload: product
    })
  }
}

export default connect(null, mapDispatchToProps)(Electronics);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

Книги. js: 

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { books } from './data'
import Products from './Products' 
import { connect } from 'react-redux';

class Books extends Component {

  addBooks(product) {
    console.warn("Books Clicked", product)
    this.props.addBookData(product)
  }

  render() {
    return (
      <View style={styles.container}>
        <Products product={books}
          onClickedItem={(product) => this.addBooks(product)}
        />
      </View>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    addBookData: (product) => dispatch({
      type: "ADD_PRODUCTS",
      payload: product
    })
  }
}

export default connect(null, mapDispatchToProps)(Books);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

Продукты. js: 

import React, { Component } from 'react';
import { View, Button, StyleSheet } from 'react-native';

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

  renderProductItems = (product) => {
    return product.map((item, index) => {
      return (
        <View key={index} style={{ padding: 20 }}>
          <Button title={item.name}
            onPress={() => this.props.onClickedItem(product)} />
        </View>
      )
    })
  }

  render() {
    return (
      <View style={styles.container}>
        {this.renderProductItems(this.props.product)}
      </View>
    );
  }
}

export default Products;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

магазин. js

import { createStore } from 'redux';
import reducer from './reducer'

export default store = createStore(reducer)

редуктор. js

const items = (state = [], action) => {
  switch (action.type) {
    case "ADD_ITEMS":
      console.warn(action.payload)
      return state
  }

}

export default items;

data. js: 

export const electronics = [
  {
    id: 1,
    name: 'Fifa 19',
    price: 49.99
  },
  {
    id: 2,
    name: 'Amazon Echo',
    price: 199
  },
  {
    id: 3,
    name: 'Bose QC 35 Headphones',
    price: 300
  }
]

export const books = [
  {
    id: 4,
    name: 'How to Kill a Mocking Bird',
    price: 10
  },
  {
    id: 5,
    name: 'War of Art',
    price: 7
  },
  {
    id: 6,
    name: 'Relentless',
    price: 5.99
  }
]

1 Ответ

0 голосов
/ 23 февраля 2020

Так что я думаю, что что-то пошло не так: мой магазин Redux не был инициализирован во всем приложении:

Ранее я инициализировал свой магазин в StartScreen. js (initialRoute в App. js), который, я думаю, был неправильным, а затем я инициализировал в App. js.

Я изменил свое приложение. js таким образом: 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import ShoppingCart from './ShoppingCart'
import { Provider } from 'react-redux'
import store from './store'

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ShoppingCart />
      </Provider>
    );
  }
}

ShoppingCart. js: 

import React, { Component } from "react";
import { StyleSheet } from "react-native";
import { createStackNavigator } from 'react-navigation'
import HomeScreen from './containers/HomeScreen'
import ElectronicsScreen from './containers/ElectronicsScreen'
import BooksScreen from './containers/BooksScreen'
import ShoppingCartIcon from './containers/ShoppingCartIcon'
import CartScreen from './containers/CartScreen'

class ShoppingCart extends Component {
    render() {
        return (
            <AppStackNavigator />
        );
    }
}

export default ShoppingCart;

const AppStackNavigator = createStackNavigator({
    Home: HomeScreen,
    Electronics: ElectronicsScreen,
    Books: BooksScreen,
    Cart: CartScreen
}, {
    navigationOptions: {
        headerTitle: 'Shopping App',
    }
})
...