What is the purpose of using Object.assign in this redux reducer? - reactjs

Question

I know that state should be immutable and this is a no-no, mutating state with push,
//action = Object {type: "CREATE_COURSE", course: {title: algebra}}
export default function courseReducer(state = [], action) {
switch(action.type) {
case 'CREATE_COURSE':
state.push(action.course)
return state;
default:
return state;
}
}
Pluralsight recommends this:
export default function courseReducer(state = [], action) {
switch(action.type) {
case 'CREATE_COURSE':
return [...state,
Object.assign({}, action.course)
];
default:
return state;
}
}
but what is wrong with not using object.assign? What is wrong with this, seems like the app still works. state is still not being mutated, a new array is being returned.
export default function courseReducer(state = [], action) {
switch(action.type) {
case 'CREATE_COURSE':
return [...state,
action.course
];
default:
return state;
}
}
CourseActions:
export function createCourse(course) {
return { type: 'CREATE_COURSE', course};
}
CoursesPage Component:
import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as courseActions from '../../actions/courseActions';
class CoursesPage extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
course: { title: '' }
};
this.onTitleChange = this.onTitleChange.bind(this);
this.onClickSave = this.onClickSave.bind(this);
}
onTitleChange(event) {
const course = this.state.course; // assign this.state.course to course
course.title = event.target.value; // reassign course.title to whatever was in input
this.setState({course: course}); // reassign state course to new course object with updated title
}
onClickSave() {
this.props.actions.createCourse(this.state.course);
}
courseRow(course, index) {
return <div key={index}>{course.title}</div>;
}
render() {
return (
<div>
<h1>Courses</h1>
{this.props.courses.map(this.courseRow)}
<h2>Add Course</h2>
<input
type="text"
onChange={this.onTitleChange}
value={this.state.course.title} />
<input
type="submit"
value="Save"
onClick={this.onClickSave} />
</div>
);
}
}
CoursesPage.propTypes = {
courses: PropTypes.array.isRequired,
actions: PropTypes.object.isRequired
};
function mapStateToProps(state, ownProps) {
return {
courses: state.courses
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(courseActions, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(CoursesPage);

Answer 1

If you don't use Object.assign, last element of new array will be a reference to action.course and whatever that is a reference to. Passing a reference may work fine, but if something mutates it somewhere down the line and it causes problems - they will be hard to debug. Better safe than sorry.

Answer 2

if you just put the reference to action.course in the array, all of your components that use this.props.courses will see all the course objects in the array share the same reference, which shouldn't be an issue up to the point where any of the component intentionally/unintentionally mutate any of them even temporarily.

Answer 3

FYI: Object.assign is also more performant than the spread operator.