From f998d6064e48332a8eea9c503d3b9d2983e372f2 Mon Sep 17 00:00:00 2001
From: hiddaorear <hiddaorear@outlook.com>
Date: Tue, 7 Feb 2017 23:34:46 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E8=AE=B0=E5=BD=95=E7=96=91=E9=97=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index ac17062..f0ebfde 100644
--- a/README.md
+++ b/README.md
@@ -231,3 +231,7 @@
 [react-optimize]: https://github.com/thejameskyle/babel-react-optimize
 [history]: https://github.com/ReactTraining/history
 [proptypes]: https://facebook.github.io/react/docs/reusable-components-zh-CN.html#prop-验证
+
+### 疑问
+
+#### super与context的使用

From 9249d7a4b08544e9e7f876047d951588b2b8c5d2 Mon Sep 17 00:00:00 2001
From: Yifeng Wang <wangyf@ecqun.com>
Date: Wed, 8 Feb 2017 18:07:49 +0800
Subject: [PATCH 2/4] update

---
 README.md                           | 3 ++-
 src/components/App.js               | 2 +-
 src/components/Msg/MsgForm/index.js | 3 +++
 src/components/Navbar/LoginForm.js  | 4 ++--
 src/components/Navbar/index.js      | 4 +++-
 src/utils/mixins/handleChange.js    | 2 ++
 6 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index f0ebfde..c50fb1d 100644
--- a/README.md
+++ b/README.md
@@ -234,4 +234,5 @@
 
 ### 疑问
 
-#### super与context的使用
+#### super与context的使用时，this的指向。
+#### `import userService from 'SERVICE/userService'`路径大写的出于什么考虑？(路径别名，引入与重构很方便)
diff --git a/src/components/App.js b/src/components/App.js
index c82bfc1..bb9b032 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -4,7 +4,7 @@ import Navbar from 'COMPONENT/Navbar/'
 let DevTools
 if (__DEV__ && __COMPONENT_DEVTOOLS__) {
   // 组件形式的 Redux DevTools
-  DevTools = require('COMPONENT/DevTools').default
+  DevTools = require('COMPONENT/DevTools').default  // 为什么不同意使用import？
 }
 
 const App = ({ children, location }) => (
diff --git a/src/components/Msg/MsgForm/index.js b/src/components/Msg/MsgForm/index.js
index 7565cd9..798daad 100644
--- a/src/components/Msg/MsgForm/index.js
+++ b/src/components/Msg/MsgForm/index.js
@@ -5,6 +5,7 @@ import tpl from './msg-form.jsx' // 分拆写 JSX 模板以减少单文件代码
 
 /* 为什么不直接 const initState = { ... } 而是用函数返回呢？
    皆因直接传 initState 仅是传引用，initState 本身可被修改 */
+  // Small Fish Wang:  初始化代码放在外面，别具一格。在redux/store 也有初始化代码。
 const getInitState = () => ({ id: '', title: '', content: '' })
 
 /* 由于本组件由 /msg/add 与 /msg/:msgId 所公用
@@ -59,6 +60,8 @@ export default class MsgForm extends Component {
 
     // 情况3：强制刷新 /msg/detail/:msgId 后，跳转到 /msg/modify/:msgId
     // 此时 state 中 msgs 为空，需要立即从后端 API 获取
+    // Small Fish Wang: 直接使用ajax拿数据，没有使用redux，失去统一管理的好处。但这里使用redux，不方便实现add与modify公用。我试试看。
+    
     msgService.fetch({ msgId }).then(msg => {
       let { id, title, content, author } = msg
       if (!msg || author !== username) {
diff --git a/src/components/Navbar/LoginForm.js b/src/components/Navbar/LoginForm.js
index d6256c0..700edc2 100644
--- a/src/components/Navbar/LoginForm.js
+++ b/src/components/Navbar/LoginForm.js
@@ -9,7 +9,7 @@ export default class LoginForm extends Component {
     // 只能使用 this.setState({ XXX: XXX })
     this.state = { username: '' }
 
-    this.handleChange = handleChange.bind(this) // mixin
+    
   }
 
   handleSubmit () {
@@ -40,7 +40,7 @@ export default class LoginForm extends Component {
             placeholder="请输入您的用户名"
             required
             value={this.state.username}
-            onChange={this.handleChange} />
+            onChange={this::handleChange} />
         </div>
         
         <button
diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js
index f2b57f5..fa1dda6 100644
--- a/src/components/Navbar/index.js
+++ b/src/components/Navbar/index.js
@@ -3,12 +3,14 @@ import { connect } from 'react-redux'
 import { IndexLink, Link } from 'react-router'
 import LoginForm from './LoginForm'
 import LogoutDropdown from './LogoutDropdown'
+import User from 'ACTION/user'
+
 
 /* 导航栏全局显示，控制着用户的登录注销 */
 
 @connect( // 功能同 UTIL/createContainer
   ({ userData }) => ({ userData }),
-  require('ACTION/user').default
+  User
 )
 export default class Navbar extends Component {
   componentWillMount () {
diff --git a/src/utils/mixins/handleChange.js b/src/utils/mixins/handleChange.js
index c43b019..5470cee 100644
--- a/src/utils/mixins/handleChange.js
+++ b/src/utils/mixins/handleChange.js
@@ -22,6 +22,8 @@
  * }
  * 之后就可以这样写了
  * onClick={this.handleChange}
+ * 
+ * Small Fish Wang: 很巧妙的办法，别具一格，一般人会用refs
  */
 export default function handleChange(evt) {
   this.setState({

From 2c052a4114fc2e9c666826b8db5c47cae432e3a7 Mon Sep 17 00:00:00 2001
From: hiddaorear <hiddaorear@outlook.com>
Date: Wed, 8 Feb 2017 23:30:50 +0800
Subject: [PATCH 3/4] update msg

---
 src/components/Msg/MsgForm/index.js | 8 ++++++++
 src/utils/mixins/handleChange.js    | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Msg/MsgForm/index.js b/src/components/Msg/MsgForm/index.js
index 798daad..d39df90 100644
--- a/src/components/Msg/MsgForm/index.js
+++ b/src/components/Msg/MsgForm/index.js
@@ -2,6 +2,10 @@ import React, { Component, PropTypes } from 'react'
 import msgService from 'SERVICE/msgService'
 import handleChange from 'MIXIN/handleChange'
 import tpl from './msg-form.jsx' // 分拆写 JSX 模板以减少单文件代码量
+import { connect } from 'react-redux'
+import Msg from 'ACTION/msg'
+
+console.info(Msg)
 
 /* 为什么不直接 const initState = { ... } 而是用函数返回呢？
    皆因直接传 initState 仅是传引用，initState 本身可被修改 */
@@ -12,6 +16,8 @@ const getInitState = () => ({ id: '', title: '', content: '' })
    因此需要判断当前是“新增模式”还是“修改模式” */
 const isAddMode = pathname => pathname.startsWith('/msg/add')
 
+@connect((userData) => (userData), Msg)
+
 export default class MsgForm extends Component {
   static contextTypes = {
     router: PropTypes.object.isRequired
@@ -97,6 +103,8 @@ export default class MsgForm extends Component {
   }
 
   render () {
+    let { userData, msgs} = this.props
+    console.error(userData, msgs)
     // 使用 call/apply，让 tpl 中的上下文与当前一致
     // （最佳实践应该跟 mixin 一样，在构造函数中使用 bind 绑定）
     return tpl.call(this)
diff --git a/src/utils/mixins/handleChange.js b/src/utils/mixins/handleChange.js
index 5470cee..554db9b 100644
--- a/src/utils/mixins/handleChange.js
+++ b/src/utils/mixins/handleChange.js
@@ -23,10 +23,10 @@
  * 之后就可以这样写了
  * onClick={this.handleChange}
  * 
- * Small Fish Wang: 很巧妙的办法，别具一格，一般人会用refs
+ * Small Fish Wang: 很巧妙的办法，别具一格，一般人会用refs。使用trim方法有一个缺点，在textarea中结尾不能输入空格。
  */
 export default function handleChange(evt) {
   this.setState({
-    [evt.target.name]: evt.target.value.trim()
+    [evt.target.name]: evt.target.value
   })
 }

From cd16ce61a366a9c33daffdce5745f3ab1c2602b7 Mon Sep 17 00:00:00 2001
From: Yifeng Wang <wangyf@ecqun.com>
Date: Thu, 9 Feb 2017 11:10:13 +0800
Subject: [PATCH 4/4] update msg

---
 README.md                           |  1 +
 src/components/Msg/MsgForm/index.js | 19 ++++++++++++++-----
 src/redux/actions/user.js           |  2 +-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index c50fb1d..db19b45 100644
--- a/README.md
+++ b/README.md
@@ -236,3 +236,4 @@
 
 #### super与context的使用时，this的指向。
 #### `import userService from 'SERVICE/userService'`路径大写的出于什么考虑？(路径别名，引入与重构很方便)
+#### Redux是把所有的数据都传递过来么，不是页面需要什么数据就传递什么数据么？如果是前者，会有性能问题；如果是后者，怎么做到的，通过Reducer？
\ No newline at end of file
diff --git a/src/components/Msg/MsgForm/index.js b/src/components/Msg/MsgForm/index.js
index d39df90..a80db7e 100644
--- a/src/components/Msg/MsgForm/index.js
+++ b/src/components/Msg/MsgForm/index.js
@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react'
-import msgService from 'SERVICE/msgService'
+// import msgService from 'SERVICE/msgService'
 import handleChange from 'MIXIN/handleChange'
 import tpl from './msg-form.jsx' // 分拆写 JSX 模板以减少单文件代码量
 import { connect } from 'react-redux'
@@ -16,7 +16,7 @@ const getInitState = () => ({ id: '', title: '', content: '' })
    因此需要判断当前是“新增模式”还是“修改模式” */
 const isAddMode = pathname => pathname.startsWith('/msg/add')
 
-@connect((userData) => (userData), Msg)
+@connect((msgs) => (msgs), Msg)
 
 export default class MsgForm extends Component {
   static contextTypes = {
@@ -56,20 +56,29 @@ export default class MsgForm extends Component {
     }
 
     // 情况2：处于 /msg/modify/:msgId，且 state 中 msgs 不为空
+    
     if (msgs.length) {
+      // Small Fish Wang: 所有的数据都传递过来了，然后从中自己挑选，这里使用了filter方法
+      // 我觉得这个应该是Redux中的Reducer来实现的，要不然每个地方都传递所有的数据，数据量大的情况下，会有性能问题。
+      // 这个地方也用解构，用得真灵活而方便。
+
       let nextState = msgs.filter(({ id }) => id === msgId)[0]
       if (!nextState || nextState.author !== username) {
         return this.handleIllegal()
       }
+
       return this.setState(nextState)
     }
+    
 
     // 情况3：强制刷新 /msg/detail/:msgId 后，跳转到 /msg/modify/:msgId
     // 此时 state 中 msgs 为空，需要立即从后端 API 获取
     // Small Fish Wang: 直接使用ajax拿数据，没有使用redux，失去统一管理的好处。但这里使用redux，不方便实现add与modify公用。我试试看。
     
-    msgService.fetch({ msgId }).then(msg => {
+    let { fetchMsg } = this.props
+    fetchMsg.fetch({ msgId }).then(msg => {
       let { id, title, content, author } = msg
+      console.info('content: ', content)
       if (!msg || author !== username) {
         return this.handleIllegal()
       }
@@ -103,8 +112,8 @@ export default class MsgForm extends Component {
   }
 
   render () {
-    let { userData, msgs} = this.props
-    console.error(userData, msgs)
+    let { userData, msg} = this.props
+    console.info(userData, msg, this.props)
     // 使用 call/apply，让 tpl 中的上下文与当前一致
     // （最佳实践应该跟 mixin 一样，在构造函数中使用 bind 绑定）
     return tpl.call(this)
diff --git a/src/redux/actions/user.js b/src/redux/actions/user.js
index dae0825..1a7db0b 100644
--- a/src/redux/actions/user.js
+++ b/src/redux/actions/user.js
@@ -58,6 +58,6 @@ export default {
 // 故在此直接给出处理逻辑
 // ================================
 export const ACTION_HANDLERS = {
-  [LOG_IN]: (userData, { payload }) => payload, // payload is userData
+  [LOG_IN]: (userData, { payload }) => {console.info('payload: ', payload); return payload}, // payload is userData
   [LOG_OUT]: () => null
 }