React-Native + Redux передает идентификатор компоненту - PullRequest
Новая
       10

React-Native + Redux передает идентификатор компоненту

0 голосов
/ 13 сентября 2018

Я новичок в реакции-нативном и недавно внедрил Redux в свое приложение. Приложение для заказа еды в ресторанах:)

Это фрагмент моего Сведения о ресторане Экран с карточками, которые представляют различные меню: 

<View style={{alignItems: 'center'}}>
                        {menus.map((item) => {
                            return (
                                <Card style={{width: '95%'}}>
                                    <TouchableOpacity onPress ={() => this.props.navigation.navigate('Products', { menuId: item.sk_id } ,{bestellung})}>
                                        <CardItem cardBody style={{justifyContent: 'center', alignItems: 'center'}}>
                                            <Text style={styles.textdes}> {item.typ} </Text>
                                        </CardItem>
                                    </TouchableOpacity>
                                </Card>
                            )
                        })}

Как вы можете видеть, функция onPress переходит к экрану продукта и передает menuId! (Экран продукта показывает всю еду определенного меню)

Это мой Product.js : 

class Products extends Component {
constructor(props) {
    super(props);
    this.state = {
        loading: 1
    };
}
componentDidMount = () => {

    this.props.fetchProducts();
    this.state.menuId;
}
addItemsToCart = (product) => {
    this.props.addToCart(product);
}
render() {
    const { products, navigation } = this.props
     const {params} = this.props.navigation.state;
      const menuId = params ? params.menuId : null;
    return (
        <View style={styles.container}>
            <Header style={styles.header}>
                <Left>
                    <Button transparent onPress={() => 
                     this.props.navigation.goBack()}>
                        <Icon style={{ fontSize: 35, color: '#FFFFFF'}} 
                         active name="arrow-back" />
                    </Button>
                </Left>
                <Body>
                    <Title style={{ fontSize: 25}}>{menuId}</Title>
                </Body>
                <Right style={{position: 'absolute', right: 20}}>
                    <Cart navigation={navigation}/>
                </Right>
            </Header>
            <StatusBar barStyle="light-content" backgroundColor="#383838" 
              translucent={false} />
            <View style={styles.bodyProducts}>
                <View>
                    <Text style={{color: 
                     '#000', fontSize: 50}}>{menuId}</Text>
                </View>
                <FlatList
                data={products}
                renderItem={({item}) => 
                   <Product item={item} addItemsToCart= 
                   {this.addItemsToCart} product={item}/>}
                keyExtractor ={(item) => item.id}
               />
            </View>

        </View>
    );
}
}
const mapStateToProps = (state) => ({
products: state.products.items

})

export default connect(mapStateToProps {addToCart,fetchProducts})(Products);

Product.js получает продукты из моего product.component.js : 

 class Product extends Component {
addToCart = () => {
    this.props.addItemsToCart(this.props.item)
}



render() {
    const { product, menuId } = this.props;
    return (
        <Card>
        <View style={styles.container}>

            <Image source={product.picture} style={{width:400,height:150}}/>
            <View style={styles.productDes}>
                <CardItem cardBody style={{justifyContent: 'center', 
                   alignItems: 'center'}}>

                <Text style={styles.font}>{menuId}</Text>
                </CardItem>
                <Text style={{fontSize: 20}}>€{(product.cost).toFixed(2)} 
                 </Text>
                <Text style={{fontSize: 16}}>{product.description}</Text>
                <TouchableOpacity onPress={this.addToCart} style= 
                    {styles.addBtn}>
                    <Text style={styles.text}>Hinzufügen</Text>
                </TouchableOpacity>
            </View>
        </View>
                        </Card>

    );
}

}

export default Product;

Вопрос теперь: как я могу передать menuId из product.js в product.component.js без навигации?

Я надеюсь, что смогу прояснить, в чем заключается моя проблема, и с нетерпением жду ваших решений и помощи:)

1 Ответ

0 голосов
/ 13 сентября 2018

Возможно, вам лучше разделить компоненты React - которые в основном являются представлениями - и компоненты редуктора / побочного эффекта (выборки данных ...).

Состояние находится в Redux Store, представления отображают только то, что вstore.

Если вы не хотите передавать menuId через параметры навигации, вы можете добавить его в состояние вашего хранилища - в основном вы добавляете поле в состоянии вашего редуктора для сохранения выбранного в данный момент menuId.

На вашем экране Сведения о ресторане при вызове onPress вы отправляете действие с selectedMenuId в свой магазин избыточности.Затем на экране product вы извлекаете selectedMenuId из своего магазина приставок.

Чтобы понять архитектуру Redux, мне нравится этот gif: https://i.stack.imgur.com/TjVsQ.gif

...