├── .babelrc
├── app
├── assets
│ ├── img
│ │ └── loading.gif
│ └── scss
│ │ ├── layout.scss
│ │ ├── about.scss
│ │ ├── items.scss
│ │ ├── variables.scss
│ │ └── main.scss
├── constants
│ ├── actionType.js
│ └── config.js
├── utils
│ ├── objectEmpty.js
│ └── getDate.js
├── compontens
│ ├── index.js
│ ├── footer.js
│ ├── app.js
│ ├── detail.js
│ ├── navBar.js
│ ├── about.js
│ └── itemsList.js
├── reducers
│ ├── detail.js
│ ├── index.js
│ └── items.js
├── containers
│ ├── detail.js
│ └── items.js
├── routers
│ └── index.js
├── store
│ └── configureStore.js
├── app.js
└── actions
│ └── index.js
├── .travis.yml
├── .gitignore
├── __test__
├── reducers
│ └── index.test.js
└── compontent
│ └── list.test.js
├── index.html
├── LICENSE
├── webpack.config.js
├── webpack.pdct.config.js
├── README.md
└── package.json
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react","env"],
3 | "plugins": [["antd"]]
4 | }
--------------------------------------------------------------------------------
/app/assets/img/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hancoson/react-redux-demo/HEAD/app/assets/img/loading.gif
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "6"
4 | after_success:
5 | - bash <(curl -s https://codecov.io/bash)
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | #OS
2 | .DS_Store
3 | Thumbs.db
4 | .history
5 |
6 | #page
7 | index.html
8 |
9 | #node
10 | /node_modules
11 | npm-debug.log*
12 | .log
13 |
14 | #IDE
15 | .idea
16 |
17 | #www
--------------------------------------------------------------------------------
/app/constants/actionType.js:
--------------------------------------------------------------------------------
1 | /**
2 | * actionTypes
3 | * @author Guoxing.Han(hancoson#163.com)
4 | * @time 2016/12/29.
5 | */
6 | import keyMirror from 'keymirror';
7 |
8 | export default keyMirror({
9 | 'EMPTYDATA': null,
10 | 'GETSUCCESS': null,
11 | 'DETAILDATA': null
12 | });
--------------------------------------------------------------------------------
/app/utils/objectEmpty.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2017/1/11.
4 | */
5 |
6 | export const isEmptyObject = obj => {
7 | for (var key in obj) {
8 | if (obj.hasOwnProperty(key)) {
9 | return false;
10 | }
11 | }
12 | return true;
13 | }
--------------------------------------------------------------------------------
/app/compontens/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2016/12/29.
4 | */
5 |
6 | import React, { Component } from 'react'
7 |
8 | export default class Index extends Component {
9 |
10 | render() {
11 | return (
12 | Hello Word!
13 | )
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/app/compontens/footer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2017/1/11.
4 | */
5 | import React, { Component } from 'react'
6 | export default class Footer extends Component {
7 |
8 | render() {
9 | return (
10 |
14 | )
15 | }
16 | }
--------------------------------------------------------------------------------
/__test__/reducers/index.test.js:
--------------------------------------------------------------------------------
1 | import * as actions from '../../app/actions/index'
2 | import types from '../../app/constants/actionType'
3 |
4 | console.log(types)
5 | describe('actions', () => {
6 | it('should create an action to add a todo', () => {
7 | const text = 'Finish docs'
8 | const expectedAction = {
9 | type: types.GETSUCCESS,
10 | text
11 | }
12 | expect(actions.fetchPosts(text)).toEqual(expectedAction)
13 | })
14 | })
--------------------------------------------------------------------------------
/app/constants/config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2017/1/10.
4 | */
5 | export default {
6 | URL_PREFIX : 'http://daily.zhihu.com/story/',
7 | API : 'http://news-at.zhihu.com/api/4/news/before/',//消息列表
8 | NEWS : 'http://news-at.zhihu.com/api/4/news/',//消息内容获取
9 | YAHOO : 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url=%22',
10 | YAHOO_SUFFIX: '%22&format=json'
11 | };
--------------------------------------------------------------------------------
/app/reducers/detail.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2017/1/5.
4 | */
5 | import actionType from '../constants/actionType';
6 |
7 | const initialState = {}
8 |
9 | const detailReducer = (state = initialState, action) => {
10 |
11 | switch (action.type) {
12 | case actionType.DETAILDATA:
13 | return action.data;
14 | case actionType.EMPTYDATA:
15 | return {};
16 | default:
17 | return state;
18 | }
19 | };
20 |
21 | export default detailReducer;
--------------------------------------------------------------------------------
/app/reducers/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2017/1/3.
4 | */
5 |
6 | import { combineReducers } from 'redux' // 利用combineReducers 合并reducers
7 | //import { combineReducers } from 'redux-immutablejs'
8 | import { routerReducer } from 'react-router-redux' // 将routerReducer一起合并管理
9 | import itemsReducer from './items'
10 | import detailReducer from './detail'
11 |
12 | export default combineReducers({
13 | itemsReducer,
14 | detailReducer,
15 | routing: routerReducer
16 | })
--------------------------------------------------------------------------------
/app/containers/detail.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2016/12/29.
4 | */
5 |
6 | import {connect} from 'react-redux'
7 | import {fetchDetailPosts, emptyData} from '../actions/index'
8 | import Detail from '../compontens/detail'
9 |
10 | const fetchDetailData = id => {
11 | return (dispatch) => {
12 | return dispatch(fetchDetailPosts(id))
13 | }
14 | }
15 | const getDetail = state => {
16 | return {detail: state.detailReducer}
17 | }
18 |
19 | export default connect(getDetail, {fetchDetailData, emptyData})(Detail)
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | react-redux|知乎日报
6 |
7 |
8 | react-redux
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/app/compontens/app.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2016/12/29.
4 | */
5 | import React, { Component } from 'react'
6 |
7 | import NavBar from '../compontens/navBar'
8 | import Footer from '../compontens/footer'
9 |
10 | export default class App extends Component {
11 | render() {
12 | return (
13 |
14 |
15 |
16 | {this.props.children}
17 |
18 |
19 |
20 | )
21 | }
22 | }
--------------------------------------------------------------------------------
/app/reducers/items.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2017/1/5.
4 | */
5 | import actionType from '../constants/actionType';
6 |
7 | const initialState = {
8 | data: '',
9 | stories: []
10 | }
11 |
12 | const itemsReducer = (state = initialState, action) => {
13 | if (action) {
14 | switch (action.type) {
15 | case actionType.GETSUCCESS:
16 | return action.data;
17 |
18 | case actionType.EMPTYDATA:
19 | return initialState;
20 | default:
21 | return state;
22 | }
23 | }
24 | };
25 |
26 | export default itemsReducer;
27 |
--------------------------------------------------------------------------------
/app/routers/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2016/12/29.
4 | */
5 | import React from 'react' // 引入react
6 | import { Route, IndexRoute } from 'react-router' // 引入react路由
7 |
8 | import App from './../compontens/app'
9 | import Index from './../compontens/index'
10 | import About from './../compontens/about'
11 | import Items from './../containers/items'
12 | import Detail from './../containers/detail'
13 |
14 | export default (
15 |
16 |
17 |
18 |
19 |
20 |
21 | )
--------------------------------------------------------------------------------
/app/assets/scss/layout.scss:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * @author Guoxing.Han(hancoson#163.com)
4 | * @time 2016/11/14.
5 | */
6 | @import 'variables';
7 | body{
8 | }
9 | .main{
10 | width: 1200px;
11 | position: relative;
12 | margin: 0 auto;
13 | }
14 | section{
15 | @extend .border-box;
16 | width: 100%;
17 | margin-top: 40px;
18 | }
19 |
20 |
21 | .index-warp{
22 | text-align: center;
23 | padding: 100px 0
24 | }
25 |
26 |
27 | footer{
28 | width: 100%;
29 | text-align: center;
30 | padding: 20px 0;
31 | color: #999;
32 | font-size: 13px;
33 | background: #fff;
34 | border-top:#f0f0f0 1px solid;
35 | margin-top: 20px;
36 | }
37 |
38 | .loading{
39 | margin: 100px auto;
40 | text-align: center;
41 | }
42 |
--------------------------------------------------------------------------------
/app/store/configureStore.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2017/1/3.
4 | */
5 | import thunk from 'redux-thunk' // redux-thunk 支持 dispatch function，并且可以异步调用它
6 | import createLogger from 'redux-logger' // 利用redux-logger打印日志
7 | import { createStore, applyMiddleware, compose } from 'redux' // 引入redux createStore、中间件及compose
8 |
9 | // 调用日志打印方法
10 | const loggerMiddleware = createLogger()
11 |
12 | // 创建一个中间件集合
13 | const middleware = [thunk, loggerMiddleware]
14 |
15 | // 利用compose增强store，这个 store 与 applyMiddleware 和 redux-devtools 一起使用
16 | const finalCreateStore = compose(
17 | applyMiddleware(...middleware),
18 | window.devToolsExtension ? window.devToolsExtension() : f => f
19 | )(createStore)
20 |
21 | export default finalCreateStore
--------------------------------------------------------------------------------
/app/utils/getDate.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * @author Guoxing.Han(hancoson#163.com)
4 | * @time 2017/1/10.
5 | */
6 | //获取当天时间并格式化
7 | export const getDate = () => {
8 | let d = new Date();
9 | let m = d.getMonth() + 1;
10 | let dd = d.getDate();
11 | if (m < 10) {
12 | m = '0' + m.toString()
13 | }
14 | if (dd < 10) {
15 | dd = '0' + dd.toString()
16 | }
17 | let str = d
18 | .getFullYear()
19 | .toString() + m + dd.toString();
20 | return str
21 | }
22 |
23 | //格式化时间
24 | export const subString = str => {
25 | let _y = '',
26 | _m = '',
27 | _d = '';
28 | _y = str.substring(0, 4);
29 | _m = str.substring(4, 6);
30 | _d = str.substring(6, 8);
31 | return (_y + '/' + _m + '/' + _d)
32 |
33 | }
34 | //格式化时间
35 | export const timeClear = str => {
36 | let _t = '';
37 | str
38 | .split('-')
39 | .forEach((i) => {
40 | _t = _t + i.toString()
41 | })
42 | return _t
43 |
44 | }
--------------------------------------------------------------------------------
/app/containers/items.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2016/12/29.
4 | */
5 | import React, { Component } from 'react'
6 | import { connect } from 'react-redux'
7 | import { fetchPosts, emptyData } from '../actions/index'
8 | import Items from '../compontens/itemsList'
9 | import { getDate } from './../utils/getDate'
10 |
11 | //通过日期选择获取数据
12 | // mapDispatchToProps()方法接收 dispatch() 方法并返回期望注入到展示组件的 props 中的回调方法
13 | const fetchData = (t) => {
14 | return (dispatch) => {
15 | return dispatch(fetchPosts(t))
16 | }
17 | }
18 | // 默认获取数据
19 | const defaultFetchData = () => {
20 | return (dispatch) => {
21 | return dispatch(fetchPosts(getDate()))
22 | }
23 | }
24 |
25 | const getItems = state => {
26 | return { items: state.itemsReducer }
27 | }
28 |
29 | /**
30 | * @getItems (state)
31 | * @defaultFetchData, @fetchData, @emptyData (dispatch)
32 | */
33 | export default connect(getItems, { defaultFetchData, fetchData, emptyData })(Items)
--------------------------------------------------------------------------------
/app/assets/scss/about.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2017/1/13.
4 | */
5 | .about-warp {
6 | h1 {
7 | padding-bottom: 5px;
8 | border-bottom: 1px #f0f0f0 solid;
9 | font-size: 32px;
10 | margin-bottom: 20px;
11 | }
12 | ul {
13 | padding-left: 20px;
14 | li {
15 | line-height: 1.6;
16 | list-style: circle;
17 | }
18 | }
19 | h2 {
20 | font-size: 26px;
21 | }
22 | code{
23 | padding: 2px 4px;
24 | font-size: 90%;
25 | color: #c7254e;
26 | background-color: #f9f2f4;
27 | border-radius: 4px;
28 | font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
29 | }
30 | pre{
31 | display: block;
32 | padding: 9.5px;
33 | margin: 0 0 10px;
34 | font-size: 13px;
35 | line-height: 1.42857143;
36 | color: #333;
37 | word-break: break-all;
38 | word-wrap: break-word;
39 | background-color: #f5f5f5;
40 | border: 1px solid #ccc;
41 | border-radius: 4px;
42 | }
43 | }
--------------------------------------------------------------------------------
/__test__/compontent/list.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Items from '../../app/compontens/itemsList'
3 | import { render } from 'enzyme'
4 |
5 | const setup = () => {
6 | const props = {
7 | items: {
8 | stories: [
9 | {
10 | images: 'images-1',
11 | title: 'title-1',
12 | date: '2018-05-29 10:00:00'
13 | },
14 | {
15 | images: 'images-2',
16 | title: 'title-2',
17 | date: '2018-05-29 10:00:00'
18 | },
19 | {
20 | images: 'images-3',
21 | title: 'title-3',
22 | date: '2018-05-29 10:00:00'
23 | },
24 | ],
25 | },
26 | emptyData: jest.fn()
27 | }
28 | const wrapper = render()
29 | return {
30 | props,
31 | wrapper
32 | }
33 | }
34 |
35 | describe('itemList', () => {
36 | const { props, wrapper } = setup()
37 | it('itemList length should be 3', () => {
38 | expect(wrapper.find('a').length).toBe(3)
39 | })
40 | })
41 |
--------------------------------------------------------------------------------
/app/compontens/detail.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Guoxing.Han(hancoson#163.com)
3 | * @time 2017/1/11.
4 | */
5 | import React, { Component } from 'react'
6 | import { Spin } from 'antd';
7 | import { isEmptyObject } from './../utils/objectEmpty'
8 |
9 | export default class Detail extends Component {
10 | componentWillMount() {
11 | const { fetchDetailData, emptyData } = this.props;
12 | //调取数据
13 | fetchDetailData(this.props.params.id)
14 | //清空原有的数据
15 | emptyData()
16 | }
17 |
18 | createMarkup() {
19 | var _fonts = this.props.detail.body;
20 | return { __html: _fonts };
21 | }
22 |
23 | render() {
24 | const _o = this.props.detail;
25 |
26 | console.log(isEmptyObject({}))
27 | return (
28 |
29 | {
30 | isEmptyObject(_o) ?
31 |
32 |
33 |
:
34 |
35 | }
36 |
13 |
14 | React-redux Zhihu Daily
15 |
16 | - 一个React+Redux版知乎日报 所有API均来自网络（若涉及侵权，请及时联系我删除）
17 | - Github[https://github.com/Hancoson/react-redux-demo]
18 |
19 |
20 |
21 | 技术实现
22 |
23 | - 采用React+Redux+ES6+webpack+antd实现
24 | - React-hot-load 热替换
25 |
26 |
27 |
28 | 运行
29 |
30 | - 安装
npm install(yarn)
31 | - 启动
npm start
32 | - 构建
npm build
33 |
34 |
35 |
36 | 目录结构
37 |
38 | ├─app
39 | │ ├─actions //redux动作生成器
40 | │ ├─assets //静态资源
41 | │ │ ├─img
42 | │ │ └─scss
43 | │ ├─compontens //UI组建
44 | │ ├─constants //常量
45 | │ ├─containers //包装器
46 | │ ├─reducers //reducers
47 | │ ├─routes //路由
48 | │ ├─store //store
49 | │ └─utils //工具函数
50 | └─dist //发布目录
51 | ├─js
52 | └─style
53 |
54 |
55 |
36 |
37 |
42 |
43 |
44 |
45 |
46 | {list.stories.length > 0
47 | ?
48 | {list
49 | .stories
50 | .map((e, index) =>
51 |
52 | 
53 | {e.title}
54 | {subString(list.date)}
55 |
56 | )}
57 |
58 | :
59 |
60 |
61 | }
62 |
63 |
64 | {/*
*/}
65 |
66 |