authentication.js

import Immutable from 'immutable';

let initialState;

initialState = Immutable.Map({
    isAuthenticated: false,
    isAuthenticating: false,
    token: null,
    user: null,
    errorMessage: null
});

export default (state = initialState, action) => {
    if (action.type === 'AUTHENTICATION.LOGIN_REQUEST') {
        return initialState.merge({
            isAuthenticating: true
        });
    }

    if (action.type === 'AUTHENTICATION.LOGIN_SUCCESS') {
        return initialState.merge({
            isAuthenticated: true,
            token: action.data.token,
            user: action.data.user
        });
    }

    return state;
};

authenticationActionCreator.js

import _ from 'lodash';
import jwtDecode from 'jwt-decode';
import {
    handleHttpStatusCode
} from './../utilities';
import {
    API_URL
} from './../config';

let authenticationActionCreator;

authenticationActionCreator = {};

authenticationActionCreator.login = (email, password) => {
    return (dispatch, state) => {
        dispatch(authenticationActionCreator.loginRequest());

        return fetch(API_URL + '/authentication', {
            method: 'post',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                email,
                password
            })
        })
            .then(handleHttpStatusCode)
            .then((response) => {
                return response.json();
            })
            .then((response) => {
                try {
                    let decodedToken;

                    decodedToken = jwtDecode(response.token);

                    dispatch(authenticationActionCreator.loginSuccess(response.token));
                } catch (e) {
                    // dispatch(authenticationActionCreator.loginFailure('Invalid token.'));
                }
            });
    };
};

authenticationActionCreator.loginSuccess = (token) => {
    let decodedToken;

    // @todo Handle failure to decode token.

    decodedToken = jwtDecode(token);

    localStorage.setItem('token', token);

    return {
        type: 'AUTHENTICATION.LOGIN_SUCCESS',
        data: {
            token,
            user: decodedToken.user
        }
    };
};


authenticationActionCreator.loginRequest = () => {
    return {
        type: 'AUTHENTICATION.LOGIN_REQUEST'
    };
};

export default authenticationActionCreator;

LoginView.js

import React from 'react';
import {
    bindActionCreators
} from 'redux';
import {
    connect
} from 'react-redux';
import {
    authenticationActionCreator
} from './../actionCreators';

import {
    DevTools
} from './../containers';

let LoginView,
    mapStateToProps,
    mapDispatchToProps;

LoginView = class extends React.Component {
    handleLogin = (email, password) => {
        this.props.authenticationActionCreator.login(email, password);
    };

    componentWillMount () {
        console.log('componentWillMount', 'this.props.isAuthenticated', this.props.isAuthenticated);
    }

    componentWillReceiveProps () {
        console.log('componentWillReceiveProps', 'this.props.isAuthenticated', this.props.isAuthenticated);
    }

    render () {
        let {
            errorMessage,
            isAuthenticating
        } = this.props;

        return <div>
            <p>this.props.isAuthenticated: {this.props.isAuthenticated ? 'true' : 'false'}</p>
            <button onClick={() => {
                this.handleLogin('gajus@applaudience.com', 'nosyte');
            }}>Login</button>
        </div>;
    }
};

mapStateToProps = (state) => {
    return {
        isAuthenticated: state.authentication.get('isAuthenticated')
    };
};

mapDispatchToProps = (dispatch) => {
    return {
        authenticationActionCreator: bindActionCreators(authenticationActionCreator, dispatch)
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(LoginView);