Skip to content

Commit 67e3269

Browse files
author
kenberkeley
committed
refactor src/redux/
1 parent 656d054 commit 67e3269

File tree

26 files changed

+184
-154
lines changed

26 files changed

+184
-154
lines changed

‎README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
>
99
> ### 更新
1010
> 2016/8/28   引入 `cross-env` 解决跨平台问题，新增优化项 `DedupePlugin`
11-
> 2016/8/29   重命名 `makeContainer / makeReducer.js => createContainer / createReducer.js`
11+
> 2016/8/29   重命名 `makeContainer / makeReducer.js => createContainer / createReducer.js`
12+
> 2016/9/10   重构 `src/redux/`
1213
1314
## 目录
1415
#### § [技术栈](#features)
@@ -221,7 +222,7 @@
221222
[alias-intro]: https://github.com/kenberkeley/vue-demo#alias
222223
[createContainer]: https://github.com/kenberkeley/react-demo/blob/master/src/utils/createContainer.js
223224
[Navbar]: https://github.com/kenberkeley/react-demo/blob/master/src/components/Navbar/index.js
224-
[connect]: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options
225+
[connect]: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options
225226
[dan-post]: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
226227
[chrome-extension]: https://github.com/zalmoxisus/redux-devtools-extension
227228
[devtools-component]: https://github.com/gaearon/redux-devtools

‎src/app.js

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
/* 入口启动文件 */
22
import React from 'react'
33
import ReactDOM from 'react-dom'
4-
import App from 'COMPONENT/App'
4+
import { Provider } from 'react-redux'
5+
import { Router } from 'react-router'
6+
import store, { history } from 'STORE'
7+
import routes from 'ROUTE'
58

69
/**
710
* 下面这货用于检测不必要的重新渲染，详情请看其项目地址：
811
* https://github.com/garbles/why-did-you-update
912
*
10-
* 有关性能提升方面的问题，之后我会总结出来
11-
* （诸如 PureComponent / shouldComponentUpdate / Immutable.js 等）
13+
* 有关性能提升方面的问题
14+
* 诸如 PureComponent / shouldComponentUpdate / Immutable.js 等
15+
* 请自行查阅相关资料
1216
*/
1317
if (__DEV__ && __WHY_DID_YOU_UPDATE__) {
1418
const { whyDidYouUpdate } = require('why-did-you-update')
@@ -24,7 +28,32 @@ if (__PROD__) {
2428
// ================================
2529
// 将根组件挂载到 DOM，启动！
2630
// ================================
31+
const MOUNT_NODE = document.getElementById('app')
32+
2733
ReactDOM.render(
28-
<App />,
29-
document.getElementById('app')
34+
<Provider store={store}>
35+
<Router history={history} children={routes} />
36+
</Provider>,
37+
MOUNT_NODE
3038
)
39+
40+
/**
41+
* 【拓展】
42+
* react-redux 的 Provider 中传入的属性
43+
* 可以让全体组件轻松访问，避免繁琐累赘的层层下传。例子：
44+
*
45+
* class XXX extends Component {
46+
* static contextTypes = {
47+
* // 组件中需要这样子声明
48+
* store: PropTypes.object.isRequired
49+
* }
50+
* componentDidMount () {
51+
* // 之后就可以直接这样用
52+
* this.context.store.getState()
53+
* }
54+
* }
55+
*
56+
* 但上面这种官方的做法实在太麻烦，于是我们有更为直接的方式：
57+
* import store from 'STORE'
58+
* store.getState() // 只读，更改 state 只能通过 dispatch
59+
*/

‎src/components/404.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default class NotFound extends Component {
1111
}
1212

1313
render () {
14-
// 非实体组件需显式返回null
14+
// 非实体组件需显式返回 null
1515
return null
1616
}
1717
}

‎src/components/App.js

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,23 @@
11
import React from 'react'
2-
import { Provider } from 'react-redux'
3-
import { Router } from 'react-router'
4-
import { store, history } from 'STORE'
5-
import routes from 'ROUTE'
2+
import Navbar from 'COMPONENT/Navbar/'
63

7-
const App = () => (
8-
<Provider store={store}>
9-
<Router history={history} children={routes} />
10-
</Provider>
4+
let DevTools
5+
if (__DEV__ && __COMPONENT_DEVTOOLS__) {
6+
// 组件形式的 Redux DevTools
7+
DevTools = require('COMPONENT/DevTools').default
8+
}
9+
10+
const App = ({ children, location }) => (
11+
<div>
12+
<Navbar location={location} />
13+
14+
<div className="container">
15+
{/* 相当于 Vue Demo 中的根 router-view */}
16+
{ children }
17+
</div>
18+
19+
{ DevTools && <DevTools /> }
20+
</div>
1121
)
1222

1323
export default App
14-
15-
/**
16-
* 【拓展】
17-
* Provider 中传入的属性，可以让全体组件轻松访问，避免繁琐累赘的层层下传。例子：
18-
*
19-
* class XXX extends Component {
20-
* static contextTypes = {
21-
* // 组件中需要这样子声明
22-
* store: PropTypes.object.isRequired
23-
* }
24-
* componentDidMount () {
25-
* // 之后就可以直接这样用
26-
* this.context.store.getState()
27-
* }
28-
* }
29-
*
30-
* 但上面这种官方的做法实在太麻烦，于是我们有更为直接的方式：
31-
* import store from 'STORE'
32-
* store.getState() // 注意：此仅为只读，更改 state 只能通过 dispatch
33-
*/

‎src/components/Msg/MsgDetail.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import msgService from 'SERVICE/msgService'
66

77
export default class MsgDetail extends Component {
88
/**
9-
* 有关Context的用法请看文档：https://facebook.github.io/react/docs/context.html
9+
* 有关 Context 的用法请看文档：https://facebook.github.io/react/docs/context.html
1010
* 实际上可不引入 this.context.router，直接使用 this.props.history 即可
1111
* 但控制台会报 Warning: [react-router] `props.history` and `context.history` are deprecated. Please use `context.router`. http://tiny.cc/router-contextchanges
1212
*/

‎src/components/Msg/MsgForm/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { Component, PropTypes } from 'react'
22
import msgService from 'SERVICE/msgService'
33
import handleChange from 'MIXIN/handleChange'
4-
import tpl from './msg-form.jsx' // 分拆写JSX模板以减少单文件代码量
4+
import tpl from './msg-form.jsx' // 分拆写 JSX 模板以减少单文件代码量
55

66
/* 为什么不直接 const initState = { ... } 而是用函数返回呢？
7-
皆因直接传initState仅是传引用，initState 本身可被修改 */
7+
皆因直接传 initState 仅是传引用，initState 本身可被修改 */
88
const getInitState = () => ({ id: '', title: '', content: '' })
99

1010
/* 由于本组件由 /msg/add 与 /msg/:msgId 所公用

‎src/components/Msg/MsgList/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import dateTimeFormatter from 'UTIL/dateTimeFormatter'
99
export default class MsgList extends Component {
1010
componentWillMount () {
1111
let { author } = this.props.location.query
12-
if (author) this.props.specifyAuthor(author)
12+
this.props.specifyAuthor(author)
1313
this.updateMsgList()
1414
}
1515
/**

‎src/components/Msg/OptBtnGroup.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component, PropTypes } from 'react'
22
import { Link } from 'react-router'
33

4-
/* 本组件全称Operation Button Group，操作按钮组 */
4+
/* 本组件全称 Operation Button Group，操作按钮组 */
55
export default class OptBtnGroup extends Component {
66
static contextTypes = {
77
router: PropTypes.object.isRequired

‎src/components/Navbar/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default class Navbar extends Component {
2020
render () {
2121
let {
2222
userData, login, logout, // 通过 connect 获取
23-
location: { pathname } // 通过 LayoutView 传入
23+
location: { pathname } // 通过 App 传入
2424
} = this.props
2525

2626
return (

‎src/components/Redirect.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ class Redirect extends Component {
2121
}
2222

2323
render () {
24-
// 非实体组件需显式返回null
24+
// 非实体组件需显式返回 null
2525
return null
2626
}
2727
}

0 commit comments

Comments
 (0)