{"action":"opened","issue":{"url":"https://api.github.com/repos/janani-b22/jannai/issues/1","repository_url":"https://api.github.com/repos/janani-b22/jannai","labels_url":"https://api.github.com/repos/janani-b22/jannai/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/janani-b22/jannai/issues/1/comments","events_url":"https://api.github.com/repos/janani-b22/jannai/issues/1/events","html_url":"https://github.com/janani-b22/jannai/issues/1","id":257389253,"number":1,"title":"Managing state of loggedin between Home and Profile page","user":{"login":"janani-b22","id":30593748,"avatar_url":"https://avatars1.githubusercontent.com/u/30593748?v=4","gravatar_id":"","url":"https://api.github.com/users/janani-b22","html_url":"https://github.com/janani-b22","followers_url":"https://api.github.com/users/janani-b22/followers","following_url":"https://api.github.com/users/janani-b22/following{/other_user}","gists_url":"https://api.github.com/users/janani-b22/gists{/gist_id}","starred_url":"https://api.github.com/users/janani-b22/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/janani-b22/subscriptions","organizations_url":"https://api.github.com/users/janani-b22/orgs","repos_url":"https://api.github.com/users/janani-b22/repos","events_url":"https://api.github.com/users/janani-b22/events{/privacy}","received_events_url":"https://api.github.com/users/janani-b22/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-09-13T13:52:34Z","updated_at":"2017-09-13T13:52:34Z","closed_at":null,"author_association":"OWNER","body":"Hi,\r\nI am new to react-native using redux. Please anyone give me a solution to manage the loggedin state between Homepage and profilePage.  Using this how can i pass the props from component to container and how to dispatch the state.I used this code. Please correct the code.Give me a solution\r\n  I have one component \r\n../Components/Home.js\r\n\r\nimport React, { Component } from 'react';\r\nimport {\r\n  Button,\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n  AppRegistry,\r\n  TextInput\r\n} from 'react-native';\r\nimport { login } from '../App/Actions/Actions';\r\nimport store from '../App/store';\r\nexport default class Home extends Component { \r\n    constructor(){\r\n     super();\r\n     this.state = {isLoggedIn : false, username :\"\", password : \"\",isLoading: true};\r\n}\r\n UserLogin(e){\r\n\r\n     this.props.onLogin(this.state.username, this.state.password);\r\n \r\n        e.preventDefault();\r\n  fetch('http://localhost:1695/api/Account/Login', {\r\n  method: 'POST',\r\n dataType: 'json',\r\n  headers: {\r\n    'Accept': 'application/json',\r\n    'Content-Type': 'application/json',\r\n  },\r\n  body: JSON.stringify({\r\nEmail:this.state.username,\r\nPassword:this.state.password,\r\n  })\r\n}).then((response) => response.json())\r\n        .then((responseData) => {\r\n        if(responseData.success===true){\r\n            this.props.navigation.navigate('Profile', { name: 'Jane' })\r\n          }else{\r\n            alert(responseData.message);\r\n          }   \r\n             }).catch(function(err) {\r\n      console.log(err);\r\n  }) \r\n}\r\n\r\n  render() {\r\n  \r\n   const { navigate } = this.props.navigation;\r\n    return (\r\n      <View style={styles.container}>\r\n        <View style={styles.formContainer}>\r\n             <Text style={styles.title}>Krossark Delivery App</Text>\r\n             <TextInput id='email'\r\n                   placeholder=\"Username\"\r\n                   placeholderTextColor=\"#000000\" \r\n                   onSubmitEditing={()=>this.passwordInput.focus()}\r\n                   keyboardType=\"email-address\"\r\n                   style={styles.input}\r\n                   onChangeText={e => this.setState({username: e})}\r\n             />\r\n              <TextInput\r\n              placeholder=\"Password\"\r\n              placeholderTextColor=\"#000000\" \r\n              secureTextEntry \r\n              style={styles.input}\r\n              ref={(input)=>this.passwordInput=input}\r\n              onChangeText={e => this.setState({password: e})} \r\n              />\r\n             <Button title=\"Login\" onPress ={(e) => {this.UserLogin(e)}}>\r\n                Login\r\n                </Button>\r\n                 <Button title=\"Registration\" onPress={() =>navigate('RoleSelection')}>\r\n                Registration\r\n                </Button>\r\n               \r\n              </View>\r\n           </View>\r\n    );\r\n  }\r\n}\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    backgroundColor: '#76a7f7',\r\n  },\r\n  title:{\r\n        color:'#fff',\r\n        marginTop:10,\r\n        width:500,\r\n        textAlign:'center',\r\n        opacity:0.9       \r\n    },\r\n       input:{\r\n        height:40,\r\n        backgroundColor:'#ffffff',\r\n        marginBottom:20,\r\n        color:'#000000',\r\n        paddingHorizontal:10,\r\n        width:300,\r\n        alignItems:'center',\r\n        marginLeft:100\r\n\r\n    },\r\n    text:{\r\n       height:40,\r\n        marginBottom:20,\r\n        color:'#000000',\r\n        paddingHorizontal:10,\r\n        width:300,\r\n        alignItems:'center',\r\n        marginLeft:100\r\n    } \r\n    ,\r\n     buttonContainer:{\r\n        backgroundColor:'#2908b9',\r\n        paddingVertical:15\r\n    },\r\n    buttonText:{\r\n         textAlign:'center',\r\n         color:'#ffffff',\r\n         fontWeight:'700'\r\n    }\r\n});\r\n\r\n\r\n \r\nAnd Container like \r\n../containers/HomeContainer.js\r\nimport React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport Home from '../.././Components/Home.js';\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n    return {\r\n        isLoggedIn: state.auth.isLoggedIn\r\n    };\r\n}\r\n \r\nconst mapDispatchToProps = (dispatch) => {\r\n    return {\r\n        onLogin: (username, password) => { dispatch(login(username, password)); },\r\n      }\r\n}\r\n \r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Home)\r\n\r\n../Actions/Actions.js\r\nexport const login = (username, password) => {\r\n    return {\r\n        type: 'LOGIN',\r\n        username: username,\r\n        password: password\r\n    };\r\n};\r\nexport const logout = () => {\r\n    return {\r\n        type: 'LOGOUT'\r\n    };\r\n};\r\n../Reucer/auth.js\r\nimport Actions from '.././Actions/Actions';\r\nconst defaultState = {\r\n    isLoggedIn: false,\r\n    username: '',\r\n    password: ''\r\n};\r\n\r\n \r\nexport default function reducer(state = defaultState, action={}) {\r\n    switch (action.type) {\r\n        case 'LOGIN': \r\n            return Object.assign({}, state, { \r\n                isLoggedIn: true,\r\n                username: action.username,\r\n                password: action.password\r\n            });\r\n        case 'LOGOUT':\r\n            return Object.assign({}, state, { \r\n                isLoggedIn: false,\r\n                username: '',\r\n                password: ''\r\n            });\r\n        default:\r\n            return state;\r\n    }\r\n}"}}
{"actor":{"display_login":"janani-b22"}}