actions.js

import fetch from 'isomorphic-fetch';

export const REQUEST_POSTS = 'posts/REQUEST';
export const RECEIVE_POSTS = 'posts/RECEIVE';
export const ERROR_POSTS = 'posts/ERROR';

export const ADD_FILTER = 'posts/ADD_FILTER';
export const REMOVE_FILTER = 'posts/REMOVE_FILTER';

// this action is a generic get all posts
export function getAll() {
  return dispatch => {
    dispatch({ type: REQUEST_POSTS });
    fetch('/api/v1/posts')
      .then(res => res.json())
      .then(posts => dispatch({
        type: RECEIVE_POSTS,
        payload: posts
      })).catch(err => dispatch({
        type: ERROR_POSTS,
        payload: err
      }))
  }
}

export function addFilter(callback) {
  return { type: ADD_FILTER, payload: callback };
}

component.jsx

import React, { Component, PropTypes } from 'react';

import Loading from 'components/Loading';

export default class List extends Component {
  static propTypes = {
    data: PropTypes.array.isRequired,
    fetch: PropTypes.func.isRequired,
    isFetching: PropTypes.bool.isRequired,
  };
  componentDidMount() {
    this.props.fetch();
  }
  render() {
    const { isFetching, data } = this.props;
    return (
      <ul>
        {isFetching && <Loading message="Retrieving posts..." />}
        {data.map(entry => <li key={entry.id}>{entry.title}</li>)}
      </ul>
    )
  }
}

container.js

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import List from 'components/List';
import * as PostActions from '';

export default connect(state => ({
  ...state.posts
}), dispatch => ({
  fetch: bindActionCreators(PostActions.getAll, dispatch) // bind this part of the api
}))(List);

reducer.js

import noop from 'lodash/noop';

import {
  REQUEST_POSTS,
  RECEIVE_POSTS,
  ERROR_POSTS,
  ADD_FILTER,
  REMOVE_FILTER
} from 'actions/posts';

export default function posts(state={
  data: [],
  isFetching: false,
  lastUpdated: new Date(),
  filter: noop
}, action) {
  switch (action.type) {
    case REQUEST_POSTS:
      return Object.assign({}, state, {
        isFetching: true
      })
    case RECEIVE_POSTS:
      return Object.assign({}, state, {
        isFetching: false,
        lastUpdated: new Date(),
        data: action.payload
      });
    case ADD_FILTER:
      return Object.assign({}, state, {
        data: state.data.filter(action.payload),
        filter: action.payload
      });
    default:
      return state;
  }
}