Question

我的减速机里面有以下情况。当用户回答问题时会触发它。当用户回答问题时，需要从嵌套数组中删除它。

示例问题对象（这些是在数组中）

{
    "title": "Quick Questions",
    "questions": [
        "title": "Hello?"
        "answers" [ /*... array of answers in here */ ]
    ]
}

我的减速机案例

case ANSWER_QUESTION:
    // The 0s here would be dynamically populated
    state.questionGroups[0].questions.splice(0, 1)

    return Object.assign({}, {
        ...state,
    })

但是，在这里我直接操作状态，我知道这是不正确的，并且会导致redux无法正确更新状态以使我的组件重新渲染。

这样做的正确方法是什么？

编辑：这可能是也可能不是我的组件不重新渲染的原因。这可能与使用connect()仅应用浅比较的事实有关，这是正确的吗？

Answer 1

首先：您正在使用 Splice 方法，这实际上是一种可变方法。您应该使用切片。

第二：如果你需要操纵状态，你应该编辑它的副本。

像这样：

const newState = state;

// here you edit your stte
newState = newState.questionGroups[0].questions.slice(0, 1)

// here you return your new state
return Object.assign({}, {
    ...newState,
})

希望有所帮助

Answer 2

首先复制状态，然后操纵并返回。

case ANSWER_QUESTION:
  var newState = Object.assign({}, state);
  //make your manipulations here
  return newState;

Answer 3

每次都应该返回一个新对象。您可以轻松使用ES6功能。

case ANSWER_QUESTION:
        return {
            ...state,
            questionGroups[0]: [...state.questionGroups[0].questions.slice(0, action.payload), ...state.questionGroups[0].questions.slice(action.payload + 1)]
    }

如何正确操作Reducer内部的状态

3 个答案: