arrays - React Redux，如何正确处理数组中对象的变化？

Question

我有一个 React Redux 应用程序，它从我的服务器获取数据并显示该数据。

我正在父容器中显示数据，如下所示:

render(){
    var dataList = this.props.data.map( (data)=> <CustomComponent key={data.id}> data.name </CustomComponent>)

    return (
        <div>
           {dataList}
        </div>
    )
}

当我与应用程序交互时，有时，我需要更新特定的自定义组件。

由于每个 CustomComponent 都有一个 id，我将其发送到我的服务器，其中包含一些有关用户选择的数据。 (即它是一个表单)

服务器使用该 ID 的更新对象进行响应。

在我的 redux 模块中，我迭代当前的 data 状态并找到 id 为

的对象

export function receiveNewData(id){
    return (dispatch, getState) => {
        const currentData = getState().data
        for (var i=0; i < currentData.length; i++){
            if (currentData[i] === id) {
                const updatedDataObject = Object.assign({},currentData[i], {newParam:"blahBlah"})
                allUpdatedData = [
                    ...currentData.slice(0,i),
                    updatedDataObject,
                    ...currentData.slice(i+1)
                ]
                dispatch(updateData(allUpdatedData))
                break
            }
        }
    }
}


const updateData = createAction("UPDATE_DATA")

createAction 来自redux-actions它基本上创建了一个 {type, Payload} 的对象。 (它标准化了 Action 创建者)

无论如何，从这个示例中您可以看到，每次发生更改时，我都会不断迭代整个数组以识别哪个对象正在更改。

考虑到我已经有了该对象的 id，这对我来说似乎效率低下。

我想知道 React/Redux 是否有更好的方法来处理这个问题？有什么建议么？

Answer 1

你的 Action 创建者做得太多了。它正在承担属于 reducer 的工作。您的 Action 创建者所需要做的就是宣布要更改的内容，而不是如何更改。例如

export function updateData(id, data) {
    return {
        type: 'UPDATE_DATA',
        id: id,
        data: data
    };
}

现在将所有逻辑移至 reducer 中。例如

case 'UPDATE_DATA':
    const index = state.items.findIndex((item) => item.id === action.id);
    return Object.assign({}, state, {
        items: [
            ...state.items.slice(0, index),
            Object.assign({}, state.items[index], action.data),
            ...state.items.slice(index + 1)
        ]
    });

如果您担心 Array#findIndex 的 O(n) 调用，请考虑使用 normalizr 重新索引您的数据。 (或类似的东西)。但是，仅当您遇到性能问题时才执行此操作；对于小数据集来说没有必要。