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

Question

我只是不明白。这完全是炼金术，让前端开发更容易的承诺掩盖了你必须恰到好处地混合各种成分才能实现这些承诺。要么我把错误的东西混在一起，要么我的歌跑调了。我不知道。

这将是一个混合问题。也许全部输入会帮助我弄清楚我似乎在哪里弄错了。

我正在使用 normalizr 来平整我的 API 响应。我花了一段时间才弄清楚我应该使用类似的东西。在 redux 中对抗对象数组有一段时间很有趣，但现在我正处于旅程的扁平化响应阶段。所以我的 API 响应 returns 人员列表和 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 添加更多人。看，出于某种原因，如果我将更多的人放入这个 reducer 中，它只会替换所有内容而不是添加它们。好吧，我做错了。更多的研究提出了这个叫做 Lodash 的东西，它具有合并功能。完美的！我不会合并商店中的结果，我必须替换它们（或者看起来就是这样）。因此，让我们在 reducer 中使用 Lodash 来合并结果而不是替换它们。

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

好的，看起来不错，而且可以用！结果被合并而不是被替换。这种方式还有一个额外的好处，就是不需要在 reducer 中添加额外的人键。所以我实际上去更改了很多代码以不使用那个额外的人员密钥。直到我发现 Lodash 在结果数组中复制键。

很多东西看起来都很新。似乎人们仍在寻找 "right" 做事的方式，以及哪些工具最有效。至少从搜索各种指南、自述文件和文档来看，它看起来是这样的。他们都告诉你使用不同的方法（而且他们最多只写了几个月）。

我认为五角星、蜡烛和诵经在这一点上同样有效，但我仍然希望有人能帮助我找到正确的成分。我正在使用 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
  }
}

这第一个console log是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 ]
}

那么第三个console log应该是这两种状态合起来吧？但它只是用 sally 和 ana 重复最后一个，并覆盖其他所有内容。

Answer 1

哈哈有趣的道具。您肯定走在正确的道路上并且在概念上是有道理的，实施肯定需要一些时间来适应。我认为您因为 ES6 功能而感到困惑。例如，当您使用扩展运算符 (...) 时，它会将所有 key:value 对转储到您正在创建的新对象中，但是如果您随后添加 people 键，它将取代前一个。真的不需要 lodash。

正确的做法应该是：

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

至于你的第二个困惑，你需要两个 people 因为第一个是减速器的名称，无论你在哪里定义它们以供你的商店使用（可能叫做 indexReducers).第二个 people 是因为那个特定的 reducer 有一个名为 people 的键，假设那个 reducer 的整个 state 是你的 people.[=19，这并不是真正必要的=]

Lmk 如果还有更多事情需要清理。

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

How to handle my redux store with Lodash and Normalizr?

lodash

reactjs

redux

normalizr