Question

我知道状态应该是不可变的，这是一个禁止，变异的状态，带有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;
    }
}

但是没有使用object.assign有什么问题？这有什么问题，似乎该应用程序仍然有效。状态仍未发生变异，正在返回一个新数组。

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组件：

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

如果您不使用Object.assign，则新数组的最后一个元素将是对action.course的引用以及对该引用的引用。传递引用可能工作正常，但如果某些东西在某处发生变异而导致问题 - 它们将很难调试。比抱歉更安全。

Answer 2

如果你只是在数组中引用action.course，那么使用this.props.courses的所有组件都会看到数组中的所有course个对象共享相同的引用，这应该是＆这是一个问题，直到任何组件有意/无意地甚至暂时改变它们中的任何一个。

Answer 3

仅供参考：Object.assign的表现也比点差算子高。

在此redux reducer中使用Object.assign的目的是什么？

3 个答案: