更新后 React & Reselect 选择器声明状态相同

Question

我正在我的项目中实现 Reselect，但对如何正确使用它有点困惑。在学习了有关如何使用重新选择的多个教程和文章之后，我使用了相同的模式，但仍然无法按预期工作。

我的选择器：

const getBaseInfo = (state) => state.Info;
const getResources = (state) => state.Resources;

export const ASelector = createSelector(
  [getBaseInfo, getResources],
  (items, resources) => { 
    let result = {};
    for(const item in items) {
      console.log(item);
      result[item] = _.pick(items[item], ['Title', 'Type', 'Beginning', 'minAmount', 'Address'])
    }
    for(const item in resources) {
      console.log(item);
      result[item] = {...result[item], firstImage: resources[item].firstImage}
    }
    return result;
  }
);

mapStateToProps 组件：

function mapStateToProps(state) {
  console.log(state);
  return { 
    gridInfo: ASelector(state)
  }
}

现在我的初始状态是：

state = { Info: {}, Resources: {} }

我的减速机：

const Info = ArrayToDictionary.Info(action.payload.data.Info);
  const Resources = ArrayToDictionary.Resources(action.payload.data.Info);
  let resourcesKeys = Object.keys(Resources);
  let infoKeys = Object.keys(Info);
  let temp = { ...state };
  let newInfo;

  for (let item of infoKeys) {
    newInfo = {
      Title: Info[item].Title,
      Type: Info[item].Type,
      BeginningOfInvesting: Info[item].BeginningOfInvesting,
      DateOfEstablishment: Info[item].DateOfEstablishment,
      pricePerUnit: Info[item].PricePerUnit,
      minUnits: Info[item].MinUnits,
      publicAmount: Info[item].PublicAmount,
      minInvestmentAmount: Info[item].MinInvestmentAmount,
      EinNumber: Info[item].EinNumber,
      Address: Info[item].Address,
      Status: Info[item].Status,
      Lat: Info[item].Lat,
      Lng: Info[item].Lng,
      CurrencySymbol: Info[item].CurrencySymbol,
      Publicity: Info[item].Publicity
    }
    temp.Info[item] = { ...temp.Info[item], ...newInfo }
  }
  for (let item of resourcesKeys) {
    temp.Resources[item] = { ...temp.Resources[item], ...Resources[item] }
  }
  return temp;

当组件以初始状态呈现时，我有一个操作从 api 中提取数据并将其相应地保存到 reducer 中的状态中。

现在我的状态发生了变化，但是在调试了一下reselects代码后，我在比较函数中发现新旧状态是一样的。 突然间，我的“旧”状态已经填充了 newState 数据，并且由于它们变得相同，因此它当然无法进行比较。

我的选择器有什么问题吗？

我确实尝试按照文档所述使用它，但仍然无法理解如何解决我的小问题。

非常感谢您的阅读和帮助！

Answer 1

看起来temp.Info[item] 和temp.Resources[item] 行正在改变现有状态。您制作了顶层的浅拷贝，但没有正确复制第二层。请参阅 Redux 文档中的 Immutable Update Patterns 页面，了解为什么这是一个问题以及应该采取的措施。

您可能想尝试使用immer 库来简化您的不可变更新逻辑。此外，我们新的 redux-starter-kit 库在内部使用了 Immer。