Question

我只是不明白。这就是炼金术，并且使前端开发的承诺更容易掩盖各种成分，你必须将这些成分恰当地用于那些承诺才能成真。要么我把错误的东西混合在一起，要么我的吟唱是不合适的。我不知道。

这将是一系列问题。也许打字全部将帮助我弄清楚我似乎把这一切都搞错了。

我使用normalizr来压缩我的API响应。我花了一段时间才弄清楚我应该使用类似的东西。在redux中战斗对象阵列有一段时间很有趣，但现在我正处于旅程的平坦响应阶段。所以我的API响应会返回一个人员列表，而normalizr会将其分解为商店，如：

people: { 
  people: { 
    entities: {
      1: { id: 1, name: "jim" },
      2: { id: 2, name: "billy" }
    },
    results : [ 1 , 2 ]
  }
}

为什么人们的两把钥匙很深？我不知道。我无法让减速机以任何其他方式工作。我看过人们使用的例子。这是我的减速机（简化为显示相关部分）：

case "GET_PEOPLE": {
  return  {...state, people: action.payload}
}

好的，工作正常。太棒了！直到我想从API中添加更多人。看看，出于某种原因，如果我让更多人进入这个减速器，它只是替换所有东西而不是添加它们。好的，所以我做错了。更多的研究提出了一个名为Lodash的东西，它具有合并功能。完善！我没有在商店中合并结果，我必须更换它们（或者它看起来像什么）。因此，让我们在reducer中使用Lodash来合并结果，而不是替换它们。

case "SET_PEOPLE": {
  return  merge({}, state, action.payload)
}

好吧所以它看起来很好，它的工作原理！结果合并而不是替换。这种方式还有一个额外的好处，就是不需要在减速器中添加额外的人员键。所以我实际上去了很多我的代码，以便不使用额外的人员密钥。直到我发现Lodash正在重复结果数组中的键。

很多这样的东西看起来真的很新。似乎人们仍然在弄清楚＆＃34;对＆＃34;做事的方式，以及哪些工具最有效。至少从搜索各种指南，自述文件和文档看起来如何。他们都告诉你使用不同的方法（他们最多只写了几个月）。

我认为五角星，蜡烛和吟唱在这一点上同样有效，但是我希望有人可以帮助我使用正确的成分。我使用React，导致需要Redux，导致需要Normalizr，这显然导致需要Lodash。那是对的吗？我在正确的道路上吗？如果没有，那么使前端状态管理成为可承受过程的最小工具集是什么。从概念上讲，我喜欢与我合作的人，但是有太多的事情让人觉得很荒谬。

减速器：

export default function reducer(state={
    people: {
        entities : {
          people: {
            0 : {
              name : ''
            }
          }
        },
        result : [0,]
    }
  }, action) {
  switch (action.type) {
    case "GET_PEOPLE": {
      const newpPeople = {...state.people, ...action.payload };
      console.log(state.people)
      console.log(action.payload)
      console.log(newpPeople)
      return {...state, people : newpPeople};
    }
    default :
      return state
  }
}

第一个控制台日志是reducer使用一次后的状态。它有最初的一组人，我已经对商店说：

{ 
    entities: { 
      people : { 
        1 : { id: 1, name: "jim" },
        2 : { id: 2, name: "billy" }
      }
    },
    result : [ 1, 2 ]
}

第二个控制台日志将是要添加的新人的有效负载：

{ 
    entities: { 
      people : { 
        7 : { id: 7, name: "sally" },
        8 : { id: 8, name: "ana" }
      }
    },
    result : [ 7, 8 ]
}

那么第三个控制台日志应该是两个状态的组合？但它只是用sally和ana重复最后一个，并覆盖其他所有内容。

Answer 1

哈哈道具为有趣的位。你肯定是在正确的道路上，从概念上讲是有道理的，实施肯定需要一些时间来适应。我认为你因为ES6功能而感到困惑。例如，当您使用扩展运算符（...）时，它会将所有键：值对转储到您正在创建的新对象中，但如果您再添加people键，则将取代之前的。真的不需要lodash。

要做的事情是正确的：

const newPeople = { ...state.people, ...action.payload };
return { ...state, people: newPeople };

至于你的第二点困惑，你需要两个people，因为第一个是reducer的名称，如你定义它们供商店使用的地方所定义的（可能是indexReducers的东西）。第二个people是因为特定的reducer有一个名为people的密钥，假设该减速器的整个state是您的people，这并不是必需的。< / p>

如果有更多事情需要清理，请注意。

如何使用Lodash和Normalizr处理我的redux商店？

1 个答案: