react-native - 如何使用 React Redux 更新 'state' 中的对象？

Question

在我的 reducer 中，假设最初我有这个状态:

{
    "loading": false,
    "data": {
        "-L1LwSwW97KkwdSnYvsc": {
            "likeCount": 10,
            "liked": false,    // I want to update this property
            "commentCount": 5
        },
        "-L1EY2_fqzn7sM1Mbf_F": {
            "likeCount": 8,
            "liked": true,
            "commentCount": 22
        }
    }
}

现在，我想更新 -L1LwSwW97KkwdSnYvsc 对象中的 liked 属性，该对象位于 data 对象中并使其成为 true。这是我一直在尝试的方法，但显然，这是错误的，因为在我更新状态后，不会触发监听状态变化的组件内的 componentWillReceiveProps 函数:

var { data } = state;
data['-L1LwSwW97KkwdSnYvsc'].liked = !data['-L1LwSwW97KkwdSnYvsc'].liked;

return { ...state, data };

您能否具体说明错误的原因以及我应该如何更改它才能使其正常工作？

Answer 1

你正在改变状态!当你解构时:

var { data } = state;

这等同于:

var data = state.data;

所以当你这样做的时候:

data[…].liked = !data[…].liked

您仍在修改 state.data，这又会改变 state。这从来都不好——使用一些嵌套的展开语法:

return { 
  ...state, 
  data: {
    ...state.data,
    '-L1LwSwW97KkwdSnYvsc': {
      ...state.data['-L1LwSwW97KkwdSnYvsc'],
      liked: !state.data['-L1LwSwW97KkwdSnYvsc'].liked
    }
  }
};