React Component render not called first time with redux - reactjs

Question

I m trying to re-route the user to the url that the user was trying to navigate on the browser address bar by doing this:
I checked if a user is logged in by calling a service method. If the session in the cookie is expired or not valid, it will return a 401 status and I will redirect to the login screen
If user is logged in, allow.
If user is not logged in, route to the login screen and after login, route to the desired url.
The issue here is, when a user type a url like : http://url/app/order
it gets redirected to the login URL : http://url/auth/login
After the user enters his credentials, although the action gets dispatched, the render for the Authorizedroute component is not called. It gets called after I click the Login button again.
Following is my Login Component
export class LoginForm extends React.Component {
componentWillReceiveProps(newProps){
const { location, isAuthenticated, history } = newProps;
if(isAuthenticated){
if(location.state && location.state.referrer){
history.push(location.state.referrer.pathname);
}else{
history.replace('/app');
}
}
}
render() {
let usernameInput, passwordInput;
const { showErrorMessage, errorMessage, onLogin } = this.props;
return (
<div className='sme-login-center-view-container'>
<HeaderComponent />
<Col lg={4} lgOffset={4} sm={12} xs={12}>
<Col lg={10} lgOffset={2} sm={4} smOffset={4}>
<Form className="sme-login-box" onSubmit={(e)=> {
e.preventDefault();
let creds = {username: usernameInput.value, password: passwordInput.value};
onLogin(creds);
}
}>
<span className='text-center sme-login-title-text'><h4>User Login</h4></span>
<FormGroup >
{errorMessage ? (<Alert bsStyle="danger"><strong>Error!</strong> {errorMessage}</Alert>) : null }
</FormGroup>
<FormGroup controlId="formHorizontalUsername">
<FormControl type="username" placeholder="Username" bsStyle="form-rounded"
inputRef={(ref) => {usernameInput = ref}}
/>
<FormControl.Feedback>
<span className="fa fa-user-o sme-login-input-feedback-span"></span>
</FormControl.Feedback>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<FormControl type="password" placeholder="Password"
inputRef={(ref) => {passwordInput = ref}}/>
<FormControl.Feedback>
<span className="fa fa-lock sme-login-input-feedback-span"></span>
</FormControl.Feedback>
</FormGroup>
<FormGroup>
<Button type="submit" block >Login</Button>
</FormGroup>
</Form>
</Col>
</Col>
</div>
);
}
}
LoginContainer
const mapStateToProps = state => {
return state.authenticationReducer.login
}
export const Login = withRouter(connect( mapStateToProps,{ onLogin: loginUser })(LoginForm))
Login Action
export function requestLogin(creds) {
return {
type: LOGIN_REQUEST,
isFetching: true,
isAuthenticated: false,
creds
}
}
export function receiveLogin() {
return {
type: LOGIN_SUCCESS,
isFetching: false,
isAuthenticated: true
}
}
export function loginError(message) {
return {
type: LOGIN_FAILURE,
isFetching: false,
isAuthenticated: false,
errorMessage: message
}
}
export function loginUser(creds) {
return dispatch => {
dispatch(requestLogin(creds))
return axios.post(url, data)
.then(response => {
if (!response.status === 200) {
dispatch(loginError(response.statusText))
} else {
dispatch(receiveLogin())
}
}
).catch(function (error) {
dispatch(loginError(error.response.statusText))
}
) }
}
Login Reducer:
export function login(state = {
isFetching: false,
isAuthenticated: false
}, action) {
switch (action.type) {
case LOGIN_REQUEST:
case LOGIN_SUCCESS:
case LOGIN_FAILURE:
return Object.assign({}, state, action)
default:
return state
}
}
Authorized Route Component
class AuthorizedRouteComponent extends React.Component {
componentWillMount() {
this.props.getUser();
}
render() {
const { component: Component, pending, logged, location, ...rest } = this.props;
return (
<Route {...rest} render={props => {
if (pending) return <div>Loading...</div>
return logged
? <Component {...this.props} />
:<Redirect to={{
pathname: '/auth/login',
state: { referrer: location }
}}/>
}} />
)
}
}
const mapStateToProps = state => {
return state.authenticationReducer.loggedUser
}
const AuthorizedRoute = connect(mapStateToProps, { getUser: getLoggedUser })(AuthorizedRouteComponent);
export default AuthorizedRoute
Find Logged user action
export function requestFetch() {
return {
type: FETCH_REQUEST,
pending: true,
logged: false
}
}
export function receiveFetch(userData) {
return {
type: FETCH_SUCCESS,
pending: false,
logged: true,
userData
}
}
export function fetchError(message) {
return {
type: FETCH_FAILURE,
pending: false,
logged: false,
errorMessage:message
}
}
export function getLoggedUser() {
return dispatch => {
dispatch(requestFetch())
return axios.get('/o3/rest/user/userdetails')
.then(response => {
if (!response.status === 200) {
dispatch(fetchError(response.statusText))
} else {
dispatch(receiveFetch(response.data))
}
}
).catch(function (error) {
dispatch(fetchError(error.response.statusText))
}
)
}
}
And finally my Logged user reducer
export function loggedUser(state = initialState, action) {
switch (action.type) {
case FETCH_REQUEST:
case FETCH_SUCCESS:
case FETCH_FAILURE:
let obj = Object.assign({}, state, action);
return obj;
default:
return state
}
}

Answer 1

You can use localStorage to save the user in your action creator that is a charge of fetching the user:
export function getLoggedUser() {
return dispatch => {
dispatch(requestFetch())
return axios.get('/o3/rest/user/userdetails')
.then(response => {
if (!response.status === 200) {
dispatch(fetchError(response.statusText))
} else {
localStorage.setItem('userData',response.data)
}
}
).catch(function (error) {
dispatch(fetchError(error.response.statusText))
}
)
}
}
And then in the in the index file ask:
const userData = localStorage.getItem('userData')
if(userData){
store.dispatch({
type: FETCH_SUCCESS,
pending: false,
logged: true,
userData
})
}
Each time you refresh the page or just type a URL like http://url/app/order is going to verify is there exist a user currently logged, if exist will dispatch an action an update your state.