如何在 redux 中正确更新嵌套数据

Question

这是我需要更新的当前对象：

 [
    { id: q1, 
      answers:[
                { id: a1, 
                  answered: false 
                },
                ...
              ]  
    },
    ...
 ]

我不知道如何更新此对象并设置例如 answered = true。有没有更好的方法来保存这种对象？我尝试使用 React 的 update 插件，但无法正常工作。

Answer 1

您可以为答案键创建一个子缩减器。看这个例子：

https://github.com/rackt/redux/blob/master/examples/async/reducers/index.js

Answer 2

您可以通过这种方式在您的减速器中更新答案列表：

function update(state, action) {
    // assuming you are passing an id of the item to be updated via action.itemId
    let obj = state.whatever_list.filter(item => item.id === action.itemId)[0]

    //assuming you are passing an id of the answer to be updated via action.answerId
    //also, assuming action.payload contains {answered: true}
    let answers = obj.answers.map(answer => answer.id === action.answerId ? 
                                            Object.assign({}, answer, action.payload) : answer)
    obj = Object.assign({}, obj, {answers: answers})
    return {
        whatever_list: state.whatever_list.map(item => item.id == action.itemId? Object.assign({}, item, obj) : item)
    }
}

您的操作可能如下所示：

function updateAnswer(itemId, answerId, payload) {
    return {
        type: UPDATE_ANSWER,
        itemId: itemId,
        answerId: answerId,
        payload: payload
    }
}

在你的 React 组件 class 中，假设有一个事件处理程序用于监视是否回答了问题：

export default class Whatever extends React.Component {

    ...

    // assuming your props contains itemId and answerId
    handleAnswered = (e) => {
        this.props.dispatch(updateAnswer(this.props.itemId, this.props.answerId, {answered: true})) 
    }

    ...
}

所以基本上发生的事情是这样的：

您的事件处理程序调用操作并将更新的数据传递给它
调用您的操作时，它return会更新数据以及类型参数
当你的 reducer 看到类型参数时，相应的处理程序将被触发（上面的第一段代码）
reducer会从列表中拉出现有数据，用新数据替换旧数据，然后return一个包含新数据的列表

Answer 3

您可以使用 dot-prop-immutable 并且更新非常简单：

return dotProp.set(state, 'quiz.0.answers.0.answered', true);

如何在 redux 中正确更新嵌套数据

How to properly update nested data in redux

immutability

redux