App.js

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import NavBar from './Navbar';
import Login from './Login';

export default class App extends Component {

	constructor(props, context) {
		super(props, context);
	}

	render() {
		return (
			<div>
				<NavBar />
				<div className="content">
					{this.props.children}
				</div>
			</div>
		);
	}
}

App.propTypes = {
	children: PropTypes.any,
};

index.js

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { Router, Route, browserHistory } from 'react-router';
import { syncHistory, routeReducer } from 'redux-simple-router';
import createLogger from 'redux-logger';
import thunkMiddleware from 'redux-thunk';

import reducers from './reducers';
import { App, Login } from './components';

const reducer = combineReducers(Object.assign({}, reducers, {
	routing: routeReducer,
}));

const loggerMiddleware = createLogger({collapsed: true});
const reduxRouterMiddleware = syncHistory(browserHistory);

const middleware = [
	reduxRouterMiddleware,
	thunkMiddleware,
	loggerMiddleware,
];

const createStoreWithMiddleware = applyMiddleware(...middleware)(createStore);

const store = createStoreWithMiddleware(reducer);

// Required for replaying actions from devtools to work
// reduxRouterMiddleware.listenForReplays(store);

const rootElement = document.getElementById('app');

render((
	<Provider store={store}>
		<Router history={browserHistory}>
			<Route path="/" component={App}>
				<Route path="login" component={Login}/>
			</Route>
		</Router>
	</Provider>
), rootElement);

Login.js

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import { fetchLogin } from '../actions/AccountActions';

class Login extends Component {

	constructor(props, context) {
		super(props, context);

		this.state = {
			email: '',
			password: '',
		};
	}

	handleChange(field, event) {
		const nextState = this.state;

		nextState[field] = event.target.value;

		this.setState(nextState);
	}

	handleSubmit(event) {
		event.preventDefault();

		this.props.handleSubmit(this.state);
	}

	render() {
		return (
			<form onSubmit={event => this.handleSubmit(event)}>
				<input
					type="text" placeholder="Email"
					value={this.state.email}
					onChange={this.handleChange.bind(this, 'email')}
				/>
				<input
					type="password" placeholder="Password"
					value={this.state.password}
					onChange={this.handleChange.bind(this, 'password')}
				/>
				<input type="submit" value="Submit"/>
			</form>
		);
	}
}

Login.propTypes = {
	handleSubmit: PropTypes.func.isRequired,
};

function mapStateToProps(state) {
	return {
		redirect: state.redirect,
	};
}

function mapDispatchToProps(dispatch) {
	return {
		handleSubmit: user => dispatch(fetchLogin(user)),
	};
}

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