reactjs - 如何使用 Lodash 和 Normalizr 处理我的 redux 存储？

Question

我只是不明白。这完全是炼金术，使前端开发更容易的 promise 掩盖了您必须正确混合的各种成分才能使这些 promise 成立。要么我把错误的东西混在一起，要么我的歌声跑调了。我不知道。

这将是一个混合问题。也许把它全部输入出来会帮助我找出我似乎把这一切都弄错了的地方。

我正在使用 normalizr 来简化我的 API 响应。我花了一段时间才弄清楚我应该使用类似的东西。在 redux 中对抗对象数组有一段时间很有趣，但现在我正处于旅程的扁平化响应阶段。所以我的 API 响应会返回一个人员列表，然后 normalizr 将其分解为存储区，例如:

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

为什么人有两把 key 深？我不知道。我无法让 reducer 以任何其他方式工作。我正在通过我看到人们使用的例子。这是我的 reducer (简化为显示相关部分):

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

好吧，很好用。甚至很棒!直到我想从 API 添加更多人。看，出于某种原因，如果我将更多人放入这个 reducer 中，它只会替换所有内容而不是添加它们。好的，所以我做错了。更多的研究提出了一个叫做 Lodash 的东西，它有一个合并功能。完美的!我没有合并商店中的结果，我必须替换它们(或者看起来就是这样)。所以让我们在 reducer 中使用 Lodash 来合并结果而不是替换它们。

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

好吧，它看起来不错，而且有效!结果被合并而不是被替换。这种方式的额外好处是不需要在 reducer 中添加额外的人键。所以我实际上去改变了我的很多代码，不使用额外的人键。直到我发现 Lodash 正在复制结果数组中的键。

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

我认为五角星、蜡烛和诵经在这一点上同样有效，但我希望有人能在这里帮助我使用正确的成分。我正在使用 React，这导致需要 Redux，导致需要 Normalizr，这显然导致需要 Lodash。那是对的吗？我在正确的道路上吗？如果不是，那么使前端状态管理成为一个可以忍受的过程的最少工具集是什么？从概念上讲，我喜欢我正在使用的东西，但有很多问题，这很荒谬。

reducer :

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

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

正确的做法是:

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

至于你的第二个困惑，你需要两个 people因为第一个是reducer 的名称，无论您在何处定义它们以供商店使用(可能称为 indexReducers )。第二个 people是因为那个特定的 reducer 有一个名为 people 的键，假设整个 state 真的没有必要那个 reducer 是你的 people .

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