actions

src/actions/index.js

@@ -0,0 +1,15 @@
+import axios from "axios";
+
+export const FETCH_POSTS = "fetch_posts";
+const ROOT_URL = "https://reduxblog.herokuapp.com/api";
+const API_KEY = "?key=mykey4445";
+
+export function fetchPosts() {
+  const url = `${ROOT_URL}/posts${API_KEY}`;
+  const request = axios.get(url);
+
+  return {
+    type: FETCH_POSTS,
+    payload: request
+  };
+}

src/components/post_index.js

@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { fetchPosts } from "../actions";
+
+class PostIndex extends Component {
+  componentDidMount() {
+    this.props.fetchPosts();
+  }
+
+  render() {
+
+    return <div>Post Index</div>;
+  }
+}
+
+export default connect(null, { fetchPosts })(PostIndex);

src/index.js

@@ -1,15 +1,22 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
+import React from "react";
+import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+import { createStore, applyMiddleware } from "redux";
+import { BrowserRouter, Route } from "react-router-dom";
+import promise from "redux-promise";
 
-import App from './components/app';
-import reducers from './reducers';
+import reducers from "./reducers";
+import PostIndex from "./components/post_index";
 
-const createStoreWithMiddleware = applyMiddleware()(createStore);
+const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
 
 ReactDOM.render(
   <Provider store={createStoreWithMiddleware(reducers)}>
-    <App />
-  </Provider>
-  , document.querySelector('.container'));
+    <BrowserRouter>
+      <div>
+        <Route path="/" component={PostIndex} />
+      </div>
+    </BrowserRouter>
+  </Provider>,
+  document.querySelector(".container")
+);

src/reducers/index.js

@@ -1,7 +1,8 @@
 import { combineReducers } from 'redux';
+import PostReducer from './reducer_posts'
 
 const rootReducer = combineReducers({
-  state: (state = {}) => state
+  posts: PostReducer
 });
 
 export default rootReducer;

src/reducers/reducer_posts.js

@@ -0,0 +1,12 @@
+import _ from "lodash";
+import { FETCH_POSTS } from "../actions";
+
+export default function(state = {}, action) {
+  switch (action.type) {
+    case FETCH_POSTS:
+      return _.mapKeys(action.payload.data, 'id');
+
+    default:
+      return state;
+  }
+}