client.jsx

import 'babel/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';
import { reduxRouteComponent, routerStateReducer } from 'redux-react-router';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import BrowserHistory from 'react-router/lib/BrowserHistory';
import routes from '../shared/components/routes';
import * as reducers from '../shared/reducers/index';
import promiseMiddleware from './middleware/promiseMiddleware';

const history = new BrowserHistory();
const combinedReducers = combineReducers({ router: routerStateReducer, ...reducers });
const createFinalStore = compose(applyMiddleware(thunk), applyMiddleware(promiseMiddleware), createStore);
const store = createFinalStore(combinedReducers);

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Router history={history}>
      <Route component={reduxRouteComponent(store)} children={routes} />
    </Router>,
    document.getElementById('app')
  );
});

MealActions.js

import { createAction } from 'redux-actions';
import * as WebUtils from '../webUtils/index';

import {
  SELECT_MEAL,
  UPDATE_MEAL_PROP,
  BEGIN_CREATING_MEAL,
  SUCCESS_CREATING_MEAL,
  ERROR_CREATING_MEAL,
  BEGIN_LOADING_MEALS,
  SUCCESS_LOADING_MEALS,
  ERROR_LOADING_MEALS
} from '../constants/MealsConstants';

export const selectMeal = createAction(SELECT_MEAL);
export const updateMealProp = createAction(UPDATE_MEAL_PROP);
export const successCreatingMeal = createAction(SUCCESS_CREATING_MEAL);
export const errorCreatingMeal = createAction(ERROR_CREATING_MEAL);

export function beginCreatingMeal(payload) {
  return {
    payload: payload,
    promise: WebUtils.createMeal(payload),
    types: [BEGIN_CREATING_MEAL, SUCCESS_CREATING_MEAL, ERROR_CREATING_MEAL],
  }
}

export const successLoadingMeals = createAction(SUCCESS_LOADING_MEALS);
export const errorLoadingMeals = createAction(ERROR_LOADING_MEALS);

export function beginLoadingMeals() {
  return {
    promise: WebUtils.getMeals(),
    types: [BEGIN_LOADING_MEALS, SUCCESS_LOADING_MEALS, ERROR_LOADING_MEALS],
  }
}

promiseMiddleware.js

export default function promiseMiddleware() {

  return (next) => {
    return (action) => {

      const { promise, types, ...rest } = action;

      if (!promise) {
        return next(action);
      }

      const [BEGIN, SUCCESS, FAILURE] = types;

      next({ ...rest, type: BEGIN });

      return promise.then(
        (response) => next({ ...rest, payload: response, type: SUCCESS }),
        (error) => next({ ...rest, payload: error, type: FAILURE })
      );
    }
  }