React Native redux reducers 推送数组的最佳方式答案

【问题标题】：React Native redux reducers best way to push arrayReact Native redux reducers 推送数组的最佳方式
【发布时间】：2018-04-14 14:25:30
【问题描述】：

我有以下状态和减速器，但它没有推入新的数组对象。

const initialState = {
    photos: [],
    selectedPhoto:{},
    photosTeamId:'',
    photosProjectId:''
};

case actionTypes.PHOTOS_UPDATE:
            return Object.assign({}, state, {
                photos:action.data.photos,
                photosTeamId:action.data.photosTeamId,
                photosProjectId:action.data.photosProjectId
            })

照片没有被推送而是被覆盖

【问题讨论】：

见stackoverflow.com/questions/43376849/… 和stackoverflow.com/questions/41949387/…。您可以使用 Spread 运算符语法或 Immutability-helper 包

标签： reactjs react-native redux

【解决方案1】：

这是使用 javascript spread syntax 的更简洁的方法：

const initialState = {
    photos: [],
    selectedPhoto:{},
    photosTeamId:'',
    photosProjectId:''
};

case actionTypes.PHOTOS_UPDATE:
            return {
                ...state,
                photos: [...state.photos, ...actions.data.photos],
                photosTeamId: action.data.photosTeamId,
                photosProjectId: action.data.photosProjectId
            }

【讨论】：

【解决方案2】：

case actionTypes.PHOTOS_UPDATE:
  return {
    ...state,
    photos: state.photos.concat(action.data.photos),
    photosTeamId: action.data.photosTeamId,
    photosProjectId: action.data.photosProjectId
  };

【讨论】：

【解决方案3】：

这是展开运算符 […]。扩展运算符可用于获取现有数组并向其中添加另一个元素，同时仍保留原始数组。

例子：

case actionTypes.PHOTOS_UPDATE:
  return [
    ...state,
    Object.assign({}, {
      photos:action.data.photos,
      photosTeamId:action.data.photosTeamId,
      photosProjectId:action.data.photosProjectId
    })
  ];

【讨论】：