Какова цель использования Object.assign в этом редукторном редукторе?

reactjs redux

843 просмотра

3 ответа

Я знаю, что состояние должно быть неизменным, и это состояние нет-нет, мутирующее с нажимом,

//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);
Автор: yxu296 Источник Размещён: 08.11.2019 11:21

Ответы (3)


0 плюса

Если вы не используете Object.assign, последний элемент нового массива будет ссылкой на action.course и все, на что он ссылается. Передача ссылки может работать нормально, но если что-то мутирует в каком-то месте и это вызывает проблемы - их будет трудно отлаживать. Береженого Бог бережет.

Автор: Сергей Репков Размещён: 20.08.2016 01:50

0 плюса

если вы просто поместите ссылку action.courseна массив, все ваши компоненты this.props.coursesувидят, что все courseобъекты в массиве имеют одну и ту же ссылку, что не должно вызывать проблем до тех пор, пока какой-либо компонент не будет преднамеренно / непреднамеренно мутирован любой из них даже временно.

Автор: goldbullet Размещён: 20.08.2016 02:56

0 плюса

К вашему сведению: Object.assignтакже более производительный, чем оператор распространения.

Автор: Andrew Moore Размещён: 06.07.2018 09:53
Вопросы из категории :
32x32