How to store and navigate with React Redux? - reactjs

Question

I'm new to react-redux and react-navigation.
I'm trying to build a simple app with a TextInput in the MainScreen that the user types his username and when he press "Login" that username will be saved up in the redux store and the navigation will navigate automatically to the "HomeScreen".
App.js:
const initialState = { username: "" };
const reducer = (state = initialState, action) => {
switch (action.type) {
case "STORE_USERNAME":
return { username: state.username };
default:
return state;
}
};
const store = createStore(reducer);
MainScreen.jsx:
const mapStateToProps = state => {
return {
username: state.username
};
};
const mapDispatchToProps = dispatch => {
return {
storeUsername: () => {
dispatch({ type: "STORE_USERNAME" });
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Main);
What should I change or add?

Answer 1

First you need to create an appNavigator from react-navigation like this :
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
const AppStack = createStackNavigator({
HomeScreen: {
screen: Home,
},
Login: {
screen: Login,
}});
const navigation = createAppContainer(AppStack);
And suppose what you are doing by storing username in redux state is correct, just now you need to navigate it.
SO suppose in Login.js
onButtonPress = () => {
this.props.storeUsername();
this.props.navigation.navigate('Home');// here you are redirecting to the main page after username has been stored.
}
render(){
return(
// your other code
<Button onPress={this.onButtonPress} title="submit username">
)
}
const mapStateToProps = state => {
return {
username: state.username
};
};
const mapDispatchToProps = dispatch => {
return {
storeUsername: () => {
dispatch({ type: "STORE_USERNAME" });
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);
Hope it helps. feel free for doubts