Added a simple redux counter example

frontend/app/js/actions/app.js

@@ -1,45 +1,7 @@
-import api from "api";
+export const INCREMENT = "INCREMENT";
 
-export const TEST_ACTION = "TEST_ACTION";
-
-export const TEST_ASYNC_ACTION_START = "TEST_ASYNC_ACTION_START";
-export const TEST_ASYNC_ACTION_ERROR = "TEST_ASYNC_ACTION_ERROR";
-export const TEST_ASYNC_ACTION_SUCCESS = "TEST_ASYNC_ACTION_SUCCESS";
-
-export function testAction() {
-	return {
-		type: TEST_ACTION,
-	};
-}
-
-function testAsyncStart() {
-	return {
-		type: TEST_ASYNC_ACTION_START,
-	};
-}
-
-function testAsyncSuccess(data) {
+export function increment() {
 	return {
-		type: TEST_ASYNC_ACTION_SUCCESS,
-		data,
+		type: INCREMENT,
 	};
 }
-
-function testAsyncError(error) {
-	return {
-		type: TEST_ASYNC_ACTION_ERROR,
-		error,
-	};
-}
-
-export function testAsync() {
-	return function (dispatch) {
-		dispatch(testAsyncStart());
-
-		api.testAsync()
-			.then(data => dispatch(testAsyncSuccess(data)))
-			.catch(error => dispatch(testAsyncError(error)));
-	};
-}
-
-// Update

frontend/app/js/api/index.js

@@ -1,20 +0,0 @@
-import "es6-promise";
-
-function testAsync() {
-	return new Promise(resolve => {
-		setTimeout(() => {
-			const date = new Date();
-			let seconds = date.getSeconds();
-			let minutes = date.getMinutes();
-
-			seconds = seconds < 10 ? `0${ seconds }` : seconds;
-			minutes = minutes < 10 ? `0${ minutes }` : minutes;
-
-			resolve(`Current time: ${ date.getHours() }:${ minutes }:${ seconds }`);
-		}, (Math.random() * 1000) + 1000); // 1-2 seconds delay
-	});
-}
-
-export default {
-	testAsync,
-};

frontend/app/js/reducers/app.js

@@ -1,47 +1,21 @@
 import { Map } from "immutable";
 
 import {
-  TEST_ACTION,
-  TEST_ASYNC_ACTION_START,
-  TEST_ASYNC_ACTION_ERROR,
-  TEST_ASYNC_ACTION_SUCCESS,
+  INCREMENT,
 } from "actions/app";
 
 const initialState = Map({
 	counter: 0,
-	asyncLoading: false,
-	asyncError: null,
-	asyncData: null,
 });
 
 const actionsMap = {
-	[TEST_ACTION]: (state) => {
+	[INCREMENT]: (state) => {
 		const counter = state.get("counter") + 1;
 
 		return state.merge({
 			counter,
 		});
 	},
-
-  // Async action
-	[TEST_ASYNC_ACTION_START]: (state) => {
-		return state.merge({
-			asyncLoading: true,
-			asyncError: null,
-		});
-	},
-	[TEST_ASYNC_ACTION_ERROR]: (state, action) => {
-		return state.merge({
-			asyncLoading: false,
-			asyncError: action.data,
-		});
-	},
-	[TEST_ASYNC_ACTION_SUCCESS]: (state, action) => {
-		return state.merge({
-			asyncLoading: false,
-			asyncData: action.data,
-		});
-	},
 };
 
 export default function reducer(state = initialState, action = {}) {

frontend/app/js/views/Home/index.jsx

@@ -1,10 +1,41 @@
-import React, { Component } from "react";
+import React, { Component, PropTypes } from "react";
+import { connect } from "react-redux";
+import { increment } from "actions/app";
+
+@connect(state => ({
+	counter: state.app.get("counter"),
+}))
 
 export default class Home extends Component {
+	static propTypes = {
+		counter: PropTypes.number,
+		dispatch: PropTypes.func,
+	}
+
+	constructor() {
+		super();
+
+		this.handleIncrement = this.handleIncrement.bind(this);
+	}
+
+	handleIncrement() {
+		const { dispatch } = this.props;
+
+		dispatch(increment());
+	}
+
 	render() {
+		const {
+			counter,
+		} = this.props;
+
 		return (
 			<div>
 				<h2>Welcome to Musare!</h2>
+				<h3>{ counter }</h3>
+				<button onClick={ this.handleIncrement }>
+					Increase counter
+				</button>
 			</div>
 		);
 	}