4

我只是不明白。这一切都是炼金术，让前端开发更容易的承诺掩盖了你必须混合的各种成分，以使这些承诺成为现实。要么我把错误的东西混在一起，要么我的歌声走调了。我不知道。

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

我正在使用 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 正在复制结果数组中的键。

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

我认为五角星、蜡烛和诵经在这一点上会同样有效，但我希望有人能在这里帮助我使用正确的成分。我正在使用 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 重复最后一个，并覆盖其他所有内容。

4

1 回答 1

2

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

正确的做法是：

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

至于您的第二个困惑，您需要两个people，因为第一个是减速器的名称，在您定义它们以供您的商店使用的任何地方定义（可能称为indexReducers）。第二个people是因为那个特定的减速器有一个名为 的键people，假设整个state减速器都是你的people.

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

于 2016-12-28T23:42:44.510 回答