Question

要在React-Native中轻松管理应用程序状态，我们使用 redux 概念，以便将状态保存在一个位置，即 store 。
在我的代码中，我连接了一些组件，这些组件需要访问商店才能检索/存储数据但出现错误。
作为redux的初学者，请提供帮助，这是我的代码：

App.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;

Electronics.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'
  }
});

Books.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'
  }
});

Products.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'
  }
});

store.js

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

export default store = createStore(reducer)

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
  }
]

Answer 1

所以我认为问题出在我的 Redux商店不是在整个应用程序中初始化：

以前，我是在 StartScreen.js （在 App.js 中的initialRoute）中初始化我认为不正确的商店，然后在 App中初始化。 js 。

我以这种方式更改了 App.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',
    }
})

永久违反：在“连接（书籍）”的上下文或道具中找不到“商店”

1 个答案: