React - redux 状态突变错误

Question

我正在尝试将部分添加到调查对象及其引发状态突变错误。

这是我调用将整个调查对象作为参数的动作创建者的方法。

   addNewSection(sectionName){
   const id = performance.now();
    let newSurvey = Object.assign({}, this.state.survey);
    const section = Object.assign({},{
        "type": "section",
        "id": id,
        "title": sectionName,
        "position": {
            "offset": 0,
            "width": 12,
            "order": 1
        },
        "items": []
    });
    newSurvey.layout.sections.push(section);
    this.setState({survey: newSurvey});
    this.props.actions.updateSurvey(newSurvey);
}

动作创建者：

export function updateSurvey(survey){
return {type:types.ADD_SECTION_SUCCESS, survey};
}

减速器：

export default function surveyReducer(state = initialState.survey, action){
switch(action.type){

    case types.ADD_SECTION_SUCCESS:
        return action.survey;

    default:
         return state
    }    
}

状态对象的形式为：

survey: {
layout: {
    sections: [{},{},{}]
    },
    questions:[{},{},{}]
}

我一定是误解了 Object.assign。 Object.assign 是否会复制调查中的每个嵌套对象，如果我只是在调查对象的最顶层使用它，就像我在这里使用的一样？

Answer 1

首先，上面提到的解决方案是完全错误的。 Object.assign 和 ES6 扩展运算符永远不会在像您这样的深度嵌套的数据结构上工作。它们不会阻止任何状态突变。

其次，状态突变错误总是与 REDUX 的状态相关，而不是本地状态。

export default function headerReducer(state = {userName: ''}, action) {
    switch (action.type) {
        case 'SSO_USER_ACTION':
        {
            return Object.assign({}, state, { userName: action.payload });
        }
        default:
            return state;
    }
}

查看上面的示例减速器。在这里，我们总是使用以下方法返回一个新对象：

return Object.assign({}, state, { userName: action.payload });

但是，在您的情况下，状态对象“调查”并不是那么简单。它是深度嵌套的，Object.assign OR 扩展运算符根本无助于防止突变。您有 3 个选项：

1. 使用不可变的 JS 库，该库提供永远不会改变的地图和列表。
2. 使用规范化库来扁平化您的状态。
3. （一种不需要额外库的脏方法）使用以下解决方案修复突变。

Answer 2

看起来你对应该在哪里改变状态有点困惑。看起来您在 addNewSection 函数中根本没有使用 redux 状态。您只是在更新本地组件状态。你甚至不需要在这里使用 object.assign ，你可以更新本地状态并随心所欲地改变它。

当您将新调查作为调查状态返回时，您在减速器中改变了您的状态。

您需要使用 connect 和 mapStateToProps() 从道具访问您的调查状态。然后你可以在你的 reducer 中使用你的 object.assign 逻辑来返回一个新的状态副本。

function mapStateToProps(state) {
  return { survey: state.survey }
}

您可以从 this.props.survey 访问调查并将其显示在您想要的位置。

您的 addNewSection() 函数中根本不需要 object.assign。只需将您的新部分变量，将其传递给您的动作创建者，您的动作创建者会将其分派给您的减速器，您将使用 object.assign 返回一个新的状态副本，该副本将在您的 this.props.survey 上更新。

另外，建议在 object.assign 上使用对象扩展语法以获得更好的语法，请参见此处：http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html

和

这里是关于使用 mapStateToProps 的提示： https://github.com/reactjs/react-redux/blob/master/docs/api.md

Answer 3

您可以使用扩展运算符以 ES6 方式克隆对象：

let newSurvey = {...this.state.survey}