load posts

.gitignore

@@ -1,5 +1,4 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
-package.json
 package-lock.json
 
 # dependencies

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "react-starter",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "axios": "^0.17.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-redux": "^5.0.6",
+    "react-scripts": "1.0.17",
+    "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.2.0",
+    "styled-components": "^2.3.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}

src/actions/index.js

@@ -0,0 +1,14 @@
+import axios from 'axios'
+import { POSTS_URL } from '../constants/ApiConstants'
+import * as types from '../constants/ActionTypes'
+
+export const loadPosts = () => dispatch => {
+  axios.get(POSTS_URL).then(
+    res => {
+      dispatch({
+        type: types.LOAD_POSTS,
+        posts: res.data
+      })
+    }
+  )
+}

src/components/Posts.js

@@ -3,9 +3,19 @@ import styled from 'styled-components'
 
 class Posts extends Component {
   render () {
+    const { loadPosts, posts } = this.props
     return (
       <Wrap>
-        Posts
+        <Button onClick={loadPosts}>
+          加载文章
+        </Button>
+        {
+          posts.map( t => (
+            <div key={t.id}>
+              {t.title}
+            </div>
+          ))
+        }
       </Wrap>
     )
   }
@@ -14,3 +24,11 @@ class Posts extends Component {
 export default Posts
 
 const Wrap = styled.div``
+
+const Button = styled.div`
+  display: inline-block;
+  padding: 5px 10px;
+  color: white;
+  background: #00bcd4;
+  cursor: pointer;
+`

src/constants/ActionTypes.js

@@ -1 +1 @@
-export const STH = 'STH'
+export const LOAD_POSTS = 'LOAD_POSTS'

src/constants/ApiConstants.js

@@ -0,0 +1 @@
+export const POSTS_URL = `https://jsonplaceholder.typicode.com/posts`

src/containers/PostsContainer.js

@@ -1,9 +1,14 @@
 import React from 'react'
 import Posts from '../components/Posts'
 import { connect } from 'react-redux'
+import { loadPosts } from '../actions'
 
 const PostsContainer = props => <Posts {...props} />
 
-const mapStateToProps = state => ({ })
+const mapStateToProps = state => ({
+  posts: state.post.all
+})
 
-export default connect(mapStateToProps)(PostsContainer)
+export default connect(mapStateToProps, {
+  loadPosts
+})(PostsContainer)

src/reducers/post.js

@@ -3,8 +3,8 @@ import * as types from '../constants/ActionTypes'
 
 const all = (state = [], action) => {
   switch (action.type) {
-    case types.STH:
-      return state
+    case types.LOAD_POSTS:
+      return action.posts
     default:
       return state
   }

src/store/index.js

@@ -1,5 +1,8 @@
 import { createStore, applyMiddleware } from 'redux'
 import rootReducer from '../reducers'
 import logger from 'redux-logger'
+import thunk from 'redux-thunk'
 
-export default createStore(rootReducer, applyMiddleware(logger))
+let middlewares = [logger, thunk]
+
+export default createStore(rootReducer, applyMiddleware(...middlewares))