为什么更新存储后组件不更改（React-Redux）

Question

I have a component , that doesn't change data after updated store

 class RenderComments extends Component { commentsParse() { return this.props.comments.map((comment) => { if (comment.hasComments === true) { return ( <div key={comment.id}> <CommentItem data={comment} /> </div> ) // return } }); // this.props.comments.map() } // commentParse render() { return ( <div> { this.commentsParse() } </div> ) // return } // render } // RenderComments function mapStateToProps(state) { return { comments: state } } export default connect(mapStateToProps)(RenderComments); 

dispatcher

 class AddComment extends Component { constructor(props) { super(props); this.state = { comment: '' } } addNewComment() { this.props.addNewComment(this.state); } render() { return ( <form> <div className="comment-entry"> <div className="form-group"> <textarea onChange={event => this.setState({comment: event.target.value})} > </textarea> </div> <div className="comment-entry-footer"> <button onClick={() => this.addNewComment()} > Submit </button> </div> </div> </form> ) // return } // render } // AddComment function mapStateToProps(state) { return { comment: state } } function mapDispatchToProps(dispatch) { return bindActionCreators({addNewComment}, dispatch); } export default connect(mapStateToProps, mapDispatchToProps)(AddComment); 

this is my reducer

 import { ADD_COMMENT } from './../constants'; let allUserComments = [/* Array with 4 objects */] const createNewComment = (action) => { let d = new Date(); let n = d.toLocaleTimeString(); let newComment = { id: Math.random(), rating: 0, name: 'MyNick', thumbnail: 'icon.50x50.png', time: n, comment: action.text.comment, replyTo: null, replyToUser: null, hasComments: false } allUserComments.push(newComment); return allUserComments; } export default (state = allUserComments, action) => { switch (action.type) { case ADD_COMMENT: allUserComments = createNewComment(action); return allUserComments; default: return state; } } 

In first launch application, my component shows 4 objects ie state that return reducer , but after action , component doesn't re-render, it's continuing shows 4 object instead 5. Why component doesn't update?

Answer 1

Your reducer is very wrong, on several levels. It's not following the requirement of updating data immutably.

First, you shouldn't be maintaining a separate allUserComments array outside the reducer function.

Second, you shouldn't be using .push() to mutate an array - you would want to use .concat() to return a new array that also contains the added item.

Third, you're also generating a new ID value in a reducer.

None of those follow the principle of "pure functions" and immutable updates in reducers. Since you're directly mutating state and keeping the same array reference, that will almost definitely keep your components from updating properly.

Please see the Redux FAQ entry on mutations keeping components from rendering for more info, as well as the Structuring Reducers - Immutable Update Patterns section.