当使用 React 性能工具和规范化 store redux 时，连接组件的 wrapper 得到了 print(in printWasted)
屏幕截图：
这是在处理 onClick 以编辑Comment组件中的文本时发生的
我的 redux 商店：
{
currentPosts: ["123", "321"],
entities: {
articles: {
"123": {
id: "123",
author: ["1"],
title: "My awesome blog posts",
comments: ["234"]
},
"321": {
id: "321",
author: ["2"],
title: "My second awesome blog posts",
comments: ["456"]
}
},
users: {
"1": {
id: "1",
name: "Paul"
},
"2": {
id: "2",
name: "Nicole"
},
"3": {
id: "3",
name: "Roy"
},
"4": {
id: "4",
name: "Peth"
}
},
comments: {
"234": {
id: "234",
commenter: ["3"],
text: "This is comment 234"
},
"456": {
id: "456",
commenter: ["4"],
text: "This is comment 456"
}
}
}
}
减速机：
const rootReducer = combineReducers({
entities,
currentPosts
})
const entities = combineReducers({
articles,
users,
comments
})
const articles = (state = {}, action) => {
return state
}
const users = (state = {}, action) => {
return state
}
const comments = (state = {}, action) => {
switch (action.type) {
case 'EDIT_COMMENT':
return Object.assign({}, state, {
[action.id]: Object.assign({}, state[action.id], {
text: action.comment
})
})
default:
return state
}
}
行动：
export const editComment = (id) => {
return {
id,
type: 'EDIT_COMMENT',
comment: `Edited comment ${id}`,
}
}
组件（由 4 分隔）：
容器：
import React from 'react'
import { connect } from 'react-redux'
import Article from './Article'
const Container = ({ currentPosts }) => (
<div>
{currentPosts.map((val, i) =>
<Article
key={i}
titleKey={val} />
)}
</div>
)
const mapStateToProps = (state) => ({
currentPosts: state.currentPosts
})
export default connect(mapStateToProps)(Container)
文章：
import React from 'react'
import { connect } from 'react-redux'
import Creator from './Creator'
import Comment from './Comment'
const Article = ({ articles, titleKey }) => {
const article = articles[titleKey]
return (
<div style={{marginBottom: '10px'}}>
title: {article.title}
{article.author.map((val, i) =>
<Creator
label="author"
key={i}
authorKey={val} />
)}
{article.comments.map((val, i) => {
return (
<Comment
key={i}
commentKey={val} />
)
}
)}
</div>
)
}
const mapStateToProps = (state) => ({
articles: state.entities.articles
})
export default connect(mapStateToProps)(Article)
评论：
import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Creator from './Creator'
import { editComment } from './actions'
import Perf from 'react-addons-perf'
window.Perf = Perf
class Comment extends React.Component {
constructor(props) {
super(props)
this.handleEditComment = this.handleEditComment.bind(this)
}
handleEditComment() {
const comment = this.props.comments[this.props.commentKey]
Perf.start()
this.props.actions.editComment(comment.id)
}
shouldComponentUpdate(nextProps) {
if (this.props.comments[this.props.commentKey].text !== nextProps.comments[nextProps.commentKey].text) {
return true
}
return false
}
componentDidUpdate() {
Perf.stop()
Perf.printWasted()
}
render() {
const comment = this.props.comments[this.props.commentKey]
return (
<div>
comment {comment.text}
{comment.commenter.map((val, i) =>
<Creator
label="commenter"
key={i}
authorKey={val} />
)}
<button onClick={this.handleEditComment}>Edit Comment</button>
</div>
)
}
}
const mapStateToProps = (state) => ({
comments: state.entities.comments
})
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators({ editComment }, dispatch)
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(Comment)
创作者
import React from 'react'
import { connect } from 'react-redux'
const Creator = ({ users, authorKey, label }) => {
const user = users[authorKey]
return (
<div>
{label}: {user.name}
</div>
)
}
const mapStateToProps = (state) => ({
users: state.entities.users
})
export default connect(mapStateToProps)(Creator)
这是否可以删除连接组件的包装器的 printWasted 或者我是否误解了 redux 和规范化 redux 存储？