Redux FlatList：更新部分数据答案

【问题标题】：Redux FlatList: update partially dataRedux FlatList：更新部分数据
【发布时间】：2018-09-01 01:51:09
【问题描述】：

如何使用 Flatlist 和 React-Native 部分更新 redux 中的数据？我尝试了几个“不可变”库，但没有一个能完美运行。

Redux 商店：

FlatListData: [ { a: 1, aa: 11 }, { b: 2, bb: 22 }, { c: 3, cc: 33 }, { d: 4, dd: 44 }, ];

新数据下载：

updatedData: [ { b: 2, bb: 44 }, { c: 6, cc: 33 }, { e: 8, ee: 90 }, ];

reducer 应该长什么样子？

const INITIAL_STATE = { FlatListData: [ { a: 1, aa: 11 }, { b: 2, bb: 22 } ] };

export default function(state = INITIAL_STATE, action) {
      switch (action.type) {
        case UPDATE_RATE:
          return {
            ...state,
            FlatListData: ???   <---
           };
          }}

非常感谢您的帮助！

【问题讨论】：

标签： react-native redux immutability reducers react-native-flatlist

【解决方案1】：

如果是关于合并两者（旧的和新的），您可以展开数组并将更新后的列表添加到其中，如下所示：

export default function(state = INITIAL_STATE, action) {
  switch (action.type) {
    case UPDATE_RATE:
      return {
        ...state,
        FlatListData: [
          ...state.FlatListData,
          ...action.updatedData,
        ],
      };
  }
}

如果您需要替换现有值，则需要一个公共键（一些 id）来识别现有记录并过滤它们。假设你的数组对象有一个 id：

export default function(state = INITIAL_STATE, action) {
  switch (action.type) {
    case UPDATE_RATE:
      return {
        ...state,
        FlatListData: [
          ...state.FlatListData.filter((x) => 
            !action.updatedData.find((y) => y.id === x.id)),
          ...action.updatedData,
        ],
      };
  }
}

【讨论】：