diff --git a/README.md b/README.md index ac17062..db19b45 100644 --- a/README.md +++ b/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? \ No newline at end of file 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..a80db7e 100644 --- a/src/components/Msg/MsgForm/index.js +++ b/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) 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} />