一些初步的疑问，见注释。

README.md

@@ -231,3 +231,9 @@
 [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的使用时，this的指向。
+#### `import userService from 'SERVICE/userService'`路径大写的出于什么考虑？(路径别名，引入与重构很方便)
+#### Redux是把所有的数据都传递过来么，不是页面需要什么数据就传递什么数据么？如果是前者，会有性能问题；如果是后者，怎么做到的，通过Reducer？

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 }) => (

src/components/Msg/MsgForm/index.js

@@ -1,16 +1,23 @@
 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'
+import Msg from 'ACTION/msg'
+
+console.info(Msg)
 
 /* 为什么不直接 const initState = { ... } 而是用函数返回呢？
    皆因直接传 initState 仅是传引用，initState 本身可被修改 */
+  // Small Fish Wang:  初始化代码放在外面，别具一格。在redux/store 也有初始化代码。
 const getInitState = () => ({ id: '', title: '', content: '' })
 
 /* 由于本组件由 /msg/add 与 /msg/:msgId 所公用
    因此需要判断当前是“新增模式”还是“修改模式” */
 const isAddMode = pathname => pathname.startsWith('/msg/add')
 
+@connect((msgs) => (msgs), Msg)
+
 export default class MsgForm extends Component {
   static contextTypes = {
     router: PropTypes.object.isRequired
@@ -49,18 +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 获取
-    msgService.fetch({ msgId }).then(msg => {
+    // Small Fish Wang: 直接使用ajax拿数据，没有使用redux，失去统一管理的好处。但这里使用redux，不方便实现add与modify公用。我试试看。
+
+    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()
       }
@@ -94,6 +112,8 @@ export default class MsgForm extends Component {
   }
 
   render () {
+    let { userData, msg} = this.props
+    console.info(userData, msg, this.props)
     // 使用 call/apply，让 tpl 中的上下文与当前一致
     // （最佳实践应该跟 mixin 一样，在构造函数中使用 bind 绑定）
     return tpl.call(this)

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

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 () {

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
 }

src/utils/mixins/handleChange.js

@@ -22,9 +22,11 @@
  * }
  * 之后就可以这样写了
  * onClick={this.handleChange}
+ * 
+ * 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
   })
 }