Question

在我的减速机中，假设我最初有这种状态：

{
    "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
        }
    }
}

现在，我想更新liked对象内的-L1LwSwW97KkwdSnYvsc属性，该对象位于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 } } };。这永远不会好 - 使用一些嵌套的扩展语法：

  constructor(public store: InAppPurchase2) {} ...

  this.store.ready().then((status) => {
    this.logger.logEvent('store_ready', {});
    console.log(JSON.stringify(this.store.get(productId)));
    console.log('Store is Ready: ' + JSON.stringify(status));
    console.log('Products: ' + JSON.stringify(this.store.products));
  });
  // This is what is missing...
  this.store.refresh();

Answer 2

使用扩展运算符是好的，直到您开始使用深度嵌套的状态和/或数组（请记住，扩展运算符只执行浅复制）。

我宁愿建议您开始使用immutability-helper。这是一个React推荐，它会让你的代码更具可读性和无错误。

示例：

  import update from "immutability-helper";

  (...)

  const toggleLike = !state.data["-L1LwSwW97KkwdSnYvsc"].liked
  return update(state, {
    data: {
      "-L1LwSwW97KkwdSnYvsc": {
        like: {
          $set: toggleLike
        }
      }
    }
  })

如何更新状态＆＃39;与react redux？

2 个答案: