Sei sulla pagina 1di 9

Vamos a empeza con redux

Primero nos vamos a crear los datos para nuestro carrito

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
}
]
Si no funciona la navegación vamos a hacer esto

Nos vamos a crear dos botones para los diferentes productos

Esto lo haremos en el homeScreen

Ahora lo que vamos a hacer es en la otra pantalla vamos a importar nuestros datos
Y hacemos lo mismo para la otra pantalla

Los botones que vamos a crear en el home screen

<View style={styles.container}>
<Button title="Details" onPress={()=>
navigation.navigate('Details')}
/>
<Button title="Settings" onPress={()=>
navigation.navigate('Settings')}
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});

Para la screen de electronis

import React, { Component } from "react";


import {
View,
Text,
StyleSheet
} from "react-native";
import Products from '../components/Products'
import { electronics } from '../Data'
import { connect } from 'react-redux'

class ElectronicsScreen extends Component {

static navigationOptions = {
headerTitle: 'Electronics'
}
render() {
return (
<View style={styles.container}>
<Products products={electronics}
onPress={this.props.addItemToCart} />
</View>
);
}
}

const mapDispatchToProps = (dispatch) => {


return {
addItemToCart: (product) => dispatch({ type: 'ADD_TO_CART',
payload: product })
}
}

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

const styles = StyleSheet.create({


container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});

Para Books Screen

import React, { Component } from "react";


import {
View,
Text,
StyleSheet
} from "react-native";

import { books } from '../Data'


import Products from '../components/Products'
import { connect } from 'react-redux'
class BooksScreen extends Component {
render() {
return (
<View style={styles.container}>
<Products products={books}
onPress={this.props.addItemToCart} />
</View>
);
}
}

const mapDispatchToProps = (dispatch) => {


return {
addItemToCart: (product) => dispatch({ type: 'ADD_TO_CART',
payload: product })
}
}
export default connect(null, mapDispatchToProps)(BooksScreen);

const styles = StyleSheet.create({


container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
cardItems redux

nos creamos una carpeta contenedor

para eso instalamos redux

npm install redux

npm install react-redux

const cartItems = (state = [], action) => {


switch (action.type) {
case 'ADD_TO_CART':
return [...state, action.payload]
case 'REMOVE_FROM_CART':
return state.filter(cartItem => cartItem.id !==
action.payload.id)
}

return state
}

export default cartItems

en el app.js vamos a importar redux

import { Provider } from 'react-redux'


import store from './store'

y en el app .js

vamos a cambiar

<Provider store={store}>
<mainContainer />
</Provider>

Pantalla Cart Screen

import React, { Component } from "react";


import {
View,
Text,
StyleSheet
} from "react-native";
import Products from '../components/Products'
import { connect } from 'react-redux'

class CartScreen extends Component {

render() {
console.log(this.props.cartItems)

return (
<View style={styles.container}>
{this.props.cartItems.length > 0 ?
<Products
onPress={this.props.removeItem}
products={this.props.cartItems} />
: <Text>No items in your cart</Text>
}
</View>
);
}
}

const mapStateToProps = (state) => {


return {
cartItems: state
}
}

const mapDispatchToProps = (dispatch) => {


return {
removeItem: (product) => dispatch({ type: 'REMOVE_FROM_CART',
payload: product })
}
}

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

const styles = StyleSheet.create({


container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});

shoopingscartIcons

import React from "react";


import {
View,
Text,
StyleSheet,
Platform
} from "react-native";

import { withNavigation } from 'react-navigation'

import { connect } from 'react-redux'


import Icon from 'react-native-vector-icons/Ionicons'

const ShoppingCartIcon = (props) => (


<View style={[{ padding: 5 }, Platform.OS == 'android' ?
styles.iconContainer : null]}>
<View style={{
position: 'absolute', height: 30, width: 30, borderRadius:
15, backgroundColor: 'rgba(95,197,123,0.8)', right: 15, bottom: 15,
alignItems: 'center', justifyContent: 'center', zIndex: 2000,

}}>
<Text style={{ color: 'white', fontWeight: 'bold'
}}>{props.cartItems.length}</Text>
</View>
<Icon onPress={() => props.navigation.navigate('Cart')}
name="ios-cart" size={30} />
</View>
)

const mapStateToProps = (state) => {


return {
cartItems: state
}
}

export default
connect(mapStateToProps)(withNavigation(ShoppingCartIcon));

const styles = StyleSheet.create({


container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
iconContainer: {
paddingLeft: 20, paddingTop: 10, marginRight: 5
}
});
En la carpeta componentes Products.js

import React, { Component } from "react";


import {
View,
Text,
StyleSheet,
Button
} from "react-native";

class Products extends Component {

renderProducts = (products) => {


console.log(products)
return products.map((item, index) => {
return (
<View key={index} style={{ padding: 20 }}>
<Button onPress={() => this.props.onPress(item)}
title={item.name + " - " + item.price} />
</View>
)
})
}

render() {
return (
<View style={styles.container}>
{this.renderProducts(this.props.products)}
</View>
);
}
}
export default Products;

const styles = StyleSheet.create({


container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});

Potrebbero piacerti anche