Can't complete displaying alert in react native redux app - reactjs

Question

I have a reducer for login to application.
I want to display Alert when something goes wrong.
Login action that dispatch show modal action:
export function loginUser(username, password) { ...
dispatch({type: 'SHOW_MODAL', modalType: 'SUCESSFULL_LOGIN'})
Modal reducer:
export default function reducer(state={}, action) {
switch (action.type) {
case 'SHOW_MODAL':
return {
modalType: action.modalType
}
}
return state
}
But now I don't know where to go next.
Where to read state now and display Alert view.

Answer 1

You need connect your component to redux and get needed properties from state.
Example:
const stateMap = (state, props, ownProps) => {
return(
/* Here all your state */
/* name_property: state.name_action_import.name_property_on_state*/
modalType: state.login.modalType
)
}
function mapDispatchToProps(dispatch) {
return {
// This you put action on this component if you need
};
};
Here you connect your component to redux
export default connect(stateMap, mapDispatchToProps)(Alers);
And this variable in component you can get from props like:
this.props.modalType
Your component Alert will look like:
import React from "react";
import { connect } from 'react-redux';
import login from './../../../actions'; /* Here your inport to action */
class Alers extends Component {
render() {
return (
<div >
{this.props.modalType /*here you property from state */}
</div>
);
}
}
const stateMap = (state, props, ownProps) => {
return {
modalType: state.login.modalType
};
};
function mapDispatchToProps(dispatch) {
return {
};
};
export default connect(stateMap, mapDispatchToProps)(Alers);