ngrx isn't working

blog-posts.component.ts

import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'blog-posts',
  template: '<blog-post [blogPost]="blogPost" *ngFor="let blogPost of blogPosts.data"></blog-post>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BlogPostsComponent implements OnInit {
  @Input() blogPosts;
  constructor() {}
  ngOnInit() {}
}

blog.component.ts

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Rx';
import { getBlogPosts } from '../../reducers';
import { Post } from '../../models/blog.model';

@Component({
  selector: 'blog-page',
  templateUrl: `
    <!-- This renders nothing -->
    <blog-posts [blogPosts]="blogPosts | async"></blog-posts>
    <!-- This renders something -- see blogPostsOutput -->
    {{ blogPosts | async | json }}
  `
})

export class BlogPageComponent {
  blogPosts : Observable<any>;

  constructor( private store: Store<any>) {
    store.dispatch(getBlogPosts());
    this.blogPosts = store.select('blogPosts');
  }
}

blog.effects.ts

import { Injectable } from "@angular/core";
import { Actions, Effect } from "@ngrx/effects";
import { Observable } from "rxjs";
import { GET_BLOG_POSTS, GET_BLOG_POSTS_SUCCESS, GET_BLOG_POSTS_ERROR, blogPosts } from "../reducers";
import { BlogService } from "../services/";
import { Post } from '../models/blog.model';

@Injectable()
export class BlogEffects {
  public blogPosts: Observable<Post[]>;

  constructor( private actions$ : Actions,
               private blogService : BlogService ) {
  }

  @Effect() getBlogPosts$ = this.actions$
    .ofType(GET_BLOG_POSTS)
    .switchMap(action =>
      this.blogService.getBlogPosts()
           .map(blogPosts => ({
             type: GET_BLOG_POSTS_SUCCESS,
             payload: blogPosts}
           ))
           .catch(() => Observable.of({type: GET_BLOG_POSTS_ERROR})));
}

blog.services.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Http, Headers } from '@angular/http';
import { Store } from '@ngrx/store';
import { blogPosts, getBlogPosts } from '../reducers';
import { Post } from '../models/blog.model';

@Injectable()
export class BlogService {
  constructor(private http: Http, private store: Store<any>) {}

  getBlogPosts(): Observable<any> {
    return this.http.get("http://localhost:8000/blog/")
      .map(res => res.json())
      .map(payload => ({ type: 'GET_BLOG_POSTS', payload }))
      // Removed subscribe because it was throwing a compatibility error
      // .subscribe(action => this.store.dispatch(getBlogPosts()))
      
  }
}

blogPostsOutput

// This is the output of {{ blogPosts | async | json }} that I get on blog.component.html 
{
	"data": {
		"type": "GET_BLOG_POSTS",
		"payload": [{
			"id": 1,
			"category": {
				"pk": 1,
				"title": "General",
				"slug": "general"
			},
			"headline": "Test Post #1",
			"slug": "test-post-1",
			"body": "Test body 1",
			"created_on": "2017-07-11T23:17:40.760616Z",
			"updated_on": "2017-07-11T23:17:40.760649Z",
			"state": 4,
			"scheduled": null,
			"author": {
				"pk": 1,
				"username": "bmelton",
				"date_joined": "2017-07-11T23:06:38.059211Z"
			}
		}, {
			"id": 2,
			"category": {
				"pk": 1,
				"title": "General",
				"slug": "general"
			},
			"headline": "Another test",
			"slug": "another-test",
			"body": "This is another test. \r\n\r\nIt should probably be unique and distinct from the first post, but who can possibly know whether that will be true? Well, I guess I can. Huzzah!",
			"created_on": "2017-07-11T23:18:25.857563Z",
			"updated_on": "2017-07-11T23:18:25.857594Z",
			"state": 4,
			"scheduled": null,
			"author": {
				"pk": 1,
				"username": "bmelton",
				"date_joined": "2017-07-11T23:06:38.059211Z"
			}
		}]
	},
	"pending": false,
	"error": false
}

gistfile1.txt

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.diff (core.es5.js:6828)
    at NgForOf.ngDoCheck (common.es5.js:1669)
    at checkAndUpdateDirectiveInline (core.es5.js:10837)
    at checkAndUpdateNodeInline (core.es5.js:12330)
    at checkAndUpdateNode (core.es5.js:12269)
    at debugCheckAndUpdateNode (core.es5.js:13130)
    at debugCheckDirectivesFn (core.es5.js:13071)
    at Object.eval [as updateDirectives] (BlogPostsComponent.html:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13056)
    at checkAndUpdateView (core.es5.js:12236)
View_BlogPostsComponent_0 @ BlogPostsComponent.html:1
proxyClass @ compiler.es5.js:14963
DebugContext_.logError @ core.es5.js:13396
ErrorHandler.handleError @ core.es5.js:1080
ApplicationRef_.tick @ core.es5.js:4812
(anonymous) @ core.es5.js:4683
webpackJsonp.621.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.es5.js:3890
webpackJsonp.621.ZoneDelegate.invoke @ zone.js:390
webpackJsonp.621.Zone.run @ zone.js:141
NgZone.run @ core.es5.js:3821
next @ core.es5.js:4683
schedulerFn @ core.es5.js:3635
SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
SafeSubscriber.next @ Subscriber.js:185
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.es5.js:3621
checkStable @ core.es5.js:3855
onLeave @ core.es5.js:3934
onInvokeTask @ core.es5.js:3884
webpackJsonp.621.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp.621.Zone.runTask @ zone.js:191
ZoneTask.invoke @ zone.js:486
BlogPostsComponent.html:1 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 1, nodeDef: Object, elDef: Object, elView: Object}

JSON Output from server

[{
	"id": 1,
	"category": {
		"pk": 1,
		"title": "General",
		"slug": "general"
	},
	"headline": "Test Post #1",
	"slug": "test-post-1",
	"body": "Test body 1",
	"created_on": "2017-07-11T23:17:40.760616Z",
	"updated_on": "2017-07-11T23:17:40.760649Z",
	"state": 4,
	"scheduled": null,
	"author": {
		"pk": 1,
		"username": "bmelton",
		"date_joined": "2017-07-11T23:06:38.059211Z"
	}
}, {
	"id": 2,
	"category": {
		"pk": 1,
		"title": "General",
		"slug": "general"
	},
	"headline": "Another test",
	"slug": "another-test",
	"body": "Test body 2",
	"created_on": "2017-07-11T23:18:25.857563Z",
	"updated_on": "2017-07-11T23:18:25.857594Z",
	"state": 4,
	"scheduled": null,
	"author": {
		"pk": 1,
		"username": "bmelton",
		"date_joined": "2017-07-11T23:06:38.059211Z"
	}
}]

reducers.ts

export const GET_BLOG_POSTS = "GET_BLOG_POSTS";
export const GET_BLOG_POSTS_SUCCESS = "GET_BLOG_POSTS_SUCCESS";
export const GET_BLOG_POSTS_ERROR = "GET_BLOG_POSTS_ERROR";

export function getBlogPosts() {
  return {
    type: GET_BLOG_POSTS
  }
}

const initialState = {
  data: [],
  pending: false,
  error: null
}

export function blogPosts( state = initialState, { type, payload }) {
  switch( type ) {
    case GET_BLOG_POSTS:
      return Object.assign({}, state, {pending: true, error: null})

    case GET_BLOG_POSTS_SUCCESS:
      return Object.assign({}, state, {data: payload, pending: false, error: false});

    case GET_BLOG_POSTS_ERROR:
      return Object.assign({}, state, {pending: false, error: "Error"})

    default:
      return state;
  }
}