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);