React/Redux 嵌套状态问题

Question

我是 React/Redux 的新手，我正在尝试将我的一个对象存储为 Redux 状态的 Map/Hash，键是来自数据库的对象的主键和值成为对象本身。

然而，每次我更新时状态似乎都被覆盖了，我添加的新值是唯一保留的值。这是我的代码：

import { RECEIVE_CURRENT_SCAN_RESULT } from '../constants';

const initialState = {
    currentScanResult: {info:{}, results:[]},
};

export default createReducer(initialState, {
    [RECEIVE_CURRENT_SCAN_RESULT]: (state, payload) =>
        Object.assign({}, state, {
            currentScanResult: payload
        })

});


export function createReducer(initialState, reducerMap) {
    return (state = initialState, action) => {
        const reducer = reducerMap[action.type];

        return reducer
            ? reducer(state, action.payload)
            : state;
    }
}

我只想传递我的对象：

{id: 1, thing: "blue"}

并用它更新状态。然后如果我传入：

 {id: 2, thing: "red"}

我希望我的 redux 状态反映：

currentScanResult: {1: {id: 1, thing: "blue"}, 2: {id: 2, thing: "red"}}

有什么简单的方法可以做到这一点吗？如果我正在更新嵌套值，redux 会重新渲染吗？例如，如果我传入：

{id: 2, thing: "purple"}

 => currentScanResult: {1: {id: 1, thing: "blue"}, 2: {id: 2, thing: "purple"}}

我希望看到这样的行为。我研究了 Immutable JS 我只是想知道如果没有它我是否可以让这个简单的用例工作？

Answer 1

当你这样做时

Object.assign({}, state, {
    currentScanResult: payload
})

您正在覆盖 state.currentScanResult。如果你想更新它，你需要做类似

的事情

Object.assign({}, state, {
    currentScanResult: Object.assign({}, state.currentScanResult, payload)
})

React/Redux 嵌套状态问题

React/Redux nested state issue

reactjs

immutable.js

redux

react-redux