React Redux Router

ActionTypes.js

export const LOGIN_REQUEST = 'LOGIN_REQUEST';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILURE = 'LOGIN_FAILURE';
export const LOGOUT        = 'LOGOUT';

app.jsx

import   React             from 'react';

import { Router,
         Route }           from 'react-router';
import { history }         from 'react-router/lib/BrowserHistory';

import { createStore,
         combineReducers,
         applyMiddleware } from 'redux';
import { Provider }        from 'react-redux';
import   promiseMiddleware from 'redux-promise';

import * as stores from './stores';
import      Master from './views/Master';

const reducer = combineReducers(stores);
const createStoreWithMiddleware = applyMiddleware(promiseMiddleware)(createStore);
const store = createStoreWithMiddleware(reducer);

React.render((
    <Provider store={store}>
        {() =>
            <Router history={history}>
                <Route component={Master} path="admin"/>
            </Router>
        }
    </Provider>
), document.getElementById('react-mount'));

auth.jsx

import { assign } from 'lodash/object';
import { LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE, LOGOUT } from '../constants/ActionTypes';

const initialState = {
    id: null,
    loggedIn: false,
    loggingIn: false,
    error: false
};

export default function auth(state = initialState, action = {}) {
    switch (action.type) {
        case LOGIN_REQUEST:
            return assign({}, initialState, {loggingIn: true});
        case LOGIN_SUCCESS:
            return assign({}, initialState, action.payload, {loggedIn: true});
        case LOGIN_FAILURE:
            return assign({}, initialState, {error: true});
        case LOGOUT:
            return initialState;
        default:
            return state;
    }
}

AuthActions.js

import Promise from 'bluebird';
import * as types from '../constants/ActionTypes';

export function loginRequest() {
    return {
        type: types.LOGIN_REQUEST
    }
}

export function login(credentials) {
    return Promise
        .try(function() {
            var { user, pass } = credentials;

            if (user === 'john' && pass === 'password') {
                return {
                    type: types.LOGIN_SUCCESS,
                    payload: {
                        user,
                        loggedIn: true,
                        id: 1
                    }
                };
            } else {
                return {
                    type: types.LOGIN_FAILURE
                }
            }
        });
}

export function logout() {
    return {
            type: types.LOGOUT
    }
}

Login.jsx

import React, { PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as AuthActions from '../actions/AuthActions';

@connect(store => ({user: store.auth}))
class Login extends React.Component {
    constructor () {
        super();
        this._login = this._login.bind(this);
    }

    _login () {
        var user = this.refs.username.getDOMNode().value;
        var pass = this.refs.password.getDOMNode().value;
        var authActions = bindActionCreators(AuthActions, this.props.dispatch);
        authActions.loginRequest();
        authActions.login({user, pass});
    }

    render () {
        return (
            <div>
                <span>Usernamse: </span>
                <input type='text' ref='username'/>
                <span>Password: </span>
                <input type='password' ref='password'/>
                <button onClick={this._login}>Login</button>
                <p>Logging in: {JSON.stringify(this.props.user)}</p>
            </div>
        );
    }
}

export default Login;

Logout.jsx

import React, { PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as AuthActions from '../actions/AuthActions';

@connect(store => ({user: store.auth}))
class Logout extends React.Component {
    constructor () {
        super();
        this._logout = this._logout.bind(this);
    }

    _logout () {
        var authActions = bindActionCreators(AuthActions, this.props.dispatch);
        authActions.logout();
    }

    render () {
        return (
            <button onClick={this._logout}>Logout</button>
        );
    }
}

export default Logout;

Master.jsx

import React from 'react';
import Login from '../components/Login';
import Logout from '../components/Logout';
import { connect } from 'react-redux';

@connect(store => ({user: store.auth}))
class Master extends React.Component {
    render () {
        var loggedIn = !!this.props.user.id;
        if (!loggedIn) {
            return (
                <div>
                    <Login/>
                </div>
            )
        }

        return (
            <div>
                <p>Welcome {this.props.user.user}!</p>
                <Logout/>
            </div>
        );
    }
}

export default Master;

stores.js

export { default as auth } from './auth';