problems with Redux and React Native

0

I'm starting in the world of redux at work but I do not finish catching it well and there is no one who can help me out.

I created the store in the app.js some test actions and their corresponding reducers, but when I send the data I'm not saving anything in the store ....

I am using the devTool to see how the store mutates.

I have attached the code to see if you can tell me what I am doing wrong and so learn and not repeat the error again.

import React, {Component} from 'react'
import {Platform, StyleSheet, Text, View} from 'react-native'
import Router from './src/routes/Router'
import {Provider} from 'react-redux'
import { createStore } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';
import reducers from './src/redux/reducers'

const store = createStore(reducers, devToolsEnhancer());


const App = () => (
	<Provider store={store}>
		<Router/>
	</Provider>
)

export default App

import {
	GET_USER,
	GET_EMAIL
}  from './actionTypes'

export function getUser(user){
	return {
		type: GET_USER,
		user
	}
}

export function getEmail(email){
	return {
		type: GET_EMAIL,
		email
	}
}

import{
	GET_USER,
	GET_EMAIL
}from '../actions/actionTypes'

const initialState = {
	email: '',
	password: ''

}

export default function reducer(state = initialState, action={}){
	switch(action.type){
		case GET_USER:
			return{
				...state,
				user: state.user
			}
		case GET_EMAIL:
			return{
				...state,
				email: email
			}

		default:
			return state
	}
}

import React, {Component} from 'react'
import {View, Text, ImageBackground, TouchableOpacity, TextInput, Vibration} from 'react-native'
import Divider from 'react-native-divider'
import {connect} from 'react-redux'
import {getUser, getEmail} from '../redux/actions/user'
import Icon from 'react-native-vector-icons/FontAwesome';


import SignInGoogle from '../components/SignInGoogle'
import SignInFacebook from '../components/SignInFacebook'
import InputForm from '../components/commons/Input'
import Button from '../components/commons/Button'
import Brand from '../components/commons/Brand'

import Dimensions from 'Dimensions'

const deviceWidth = (Dimensions.get('window').width) - 40
const DURATION = 30

class WelcomeScreen extends Component {
	state={
		email: '',
		password: '',
		formValid: false
	}

	startVibration = () => {
		Vibration.vibrate(DURATION)
	}

	isValidForm(){

			if(this.state.email !== '' && this.state.password !== ''){
				this.setState({formValid: true}, function(){
					console.log(this.state)
				})
				this.getInformartion()
			}

	}

	getInformartion(){

		console.log('estoy pidiendo la información', this.props)
	}



	render(){
		return (
			<ImageBackground
				style={styles.bigContainer}
				source={require('../assets/images/background.png')}
			>
				<Brand />
					<View style={styles.inputContainer}>
						<Icon
							name='envelope'
							size={30}
							style={{color: '#fff', position: 'absolute', left: 5}}
						/>
						<TextInput
							placeholder='Email'
							placeholderStyle={{
								color: '#fff',
							}}
							placeholderTextColor='white'
							style={styles.inputStyles}
							secureTextEntry={false}
							onChangeText={(email)=>{this.setState({email})}}
							value={this.state.email}
						/>
					</View>
					<View style={styles.inputContainer}>
						<Icon
							name='lock'
							size={30}
							style={{color: '#fff', position: 'absolute', left: 5}}
						/>
						<TextInput
							placeholder='Password'
							placeholderStyle={{
								color: '#fff',
							}}
							placeholderTextColor='white'
							style={styles.inputStyles}
							secureTextEntry={true}
							onChangeText={(password)=>{this.setState({password})}}
							value={this.state.password}
						/>
					</View>

					<TouchableOpacity
						style ={styles.btn}
						onPress={() => {
									this.startVibration()
									this.isValidForm()
									getEmail(this.state.email)
								}}
					>
								<Text style={styles.btnText}
								>
								Login
								</Text>
				</TouchableOpacity>
				<Button
					title='Registrar con E-mail'
					navigation={this.props.navigation}
					goTo='signIn'
					marginBottom={7}
				/>

				<Divider
					borderColor="#fff"
					color="#fff"
					orientation="center"
				>
					OR
				</Divider>

				<SignInFacebook />
				<SignInGoogle />
			</ImageBackground>
		)
	}
}

const styles = {
	bigContainer:{
		flex:1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#00d8c5'
	},
	inputContainer:{
		flexDirection: 'row'
	},
	inputStyles: {
		color: '#fff',
		marginBottom: 20,
		borderBottomWidth: 2,
		borderBottomColor: "#fff",
		width: deviceWidth,
		height:40,
		paddingBottom: 5,
		paddingLeft: 50,
		alignItems: 'center',
		fontSize: 17,
		fontWeight: 'bold'
	},
		btn:{
			fontWeight: '700',
			borderRadius: 20,
			borderWidth:0,
			width: deviceWidth,
			height: 45,
			backgroundColor: '#008591',
			marginBottom: 20,
			alignItems: 'center',
			justifyContent: 'center',
			shadowColor: '#000',
			shadowOffset: {width: 0, height: 2},
			shadowOpacity: 0.4,
			shadowRadius: 1,
			elevation: 1,
		},
		btnText:{
				color: '#fff',
				fontWeight: 'bold',
				fontSize:17
			}
}

const mapStateToProps = state => ({
	user: state,
	email: state.email
})

const mapDispatchToProps = (dispatch) => {
	return{
		getUser: ()=>(dispatch(getUser(state))),
		getEmail: ()=>{dispatch(getEmail(state.email))}
	}
}



export default connect(mapStateToProps, mapDispatchToProps)(WelcomeScreen);
    
asked by jcanton 15.11.2018 в 15:20
source

0 answers