App.js

import React from 'react';
import { Route } from 'react-router-dom';
import { connect } from 'react-redux';

// Import Root Components and Setup Routes
import Header from './components/Header';
import PrivateRoute from '../../components/routing/PrivateRoute';

import Start from '../Start/Start'
import Login from '../Login/Login'
import Register from '../Register/Register'
import View from '../View/View'

const App = (props) => (
    <div>
        { props.loggedIn && <Header /> }
        <Route exact path="/" component={ Start } />
        <Route path="/login" component={ Login } />
        <Route path="/register" component={ Register } />
        <PrivateRoute path="/view" isAuthenticated={ props.isAuthenticated } component={ View } />
    </div>
);

const mapStateToProps = (state) => {
    return {
        isAuthenticated: state.isAuthenticated
    }
}

export default connect(mapStateToProps, null)(App);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';

import './index.css';

// Setup redux store
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { logger } from 'redux-logger'
import reducers from './reducers';

const middleware = applyMiddleware(thunk, logger)
const store = createStore(
  reducers,
  middleware
);

import App from './containers/App/App'

ReactDOM.render(
  <Provider store={ store }>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root')
);

Login.js

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import { Grid, Row, Col, FormGroup, FormControl, Button } from 'react-bootstrap'
import { connect } from 'react-redux';

import { loginUserAction } from '../../reducers/login';

import Logo from '../../img/LogoURSS.png'

class Login extends Component {
  login = (e) => {
    let email = this.email.value || '',
      password = this.password.value || '';

    this.props.loginUser(email, password);

    e.preventDefault();
    e.stopPropagation();
  }

  render() {
    return (
      <div className="login-page">
        <Grid>
          <Row>
            <Col mdOffset={4} lgOffset={4} md={4} lg={4}>
              <img src={Logo} alt="Logo Ultimate RSS" className="logo"/>
              <h1>Ultimate RSS <br/> <small>Powered by React</small></h1>
              <form onSubmit={ this.login }>
                <FormGroup>
                  <FormControl
                    inputRef={ref => { this.email = ref; }}
                    required
                    type="email"
                    placeholder="Email"
                    id="email">
                  </FormControl>
                  <FormControl
                    inputRef={ref => { this.password = ref; }}
                    required
                    type="password"
                    placeholder="Password"
                    id="password">
                  </FormControl>
                  <Button
                    bsClass="btn btn-default btn-login"
                    type="submit">
                    Login
                  </Button>
                </FormGroup>
              </form>
            </Col>
          </Row>
        </Grid>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    isAuthenticated: state.login.isAuthenticated
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    loginUser: (username, password) => {
      dispatch(loginUserAction(username, password))
    }
  }
}

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