Redux管理myCities数组删除关联项失败反嵌套数组如何解决？

问题原因 #

• 同个返回对象中重复声明myCities字段，前面对myCities赋值为空数组的逻辑会被后面的赋值逻辑完全覆盖，不会生效
• 过滤操作的数据源错误：调用initialState.myCities.filter时，初始状态的myCities永远是空数组，过滤逻辑不会生效
• 数组嵌套的直接原因：代码中[...state.myCities, initialState.myCities.filter(xxx)]的写法，会把filter返回的数组整体作为单个元素插入到原数组末尾，自然出现数组嵌套结构
• Action职责混淆：GETCITYBYID语义为查询单个城市信息，不应该承担删除城市的逻辑，拆分逻辑更利于后续维护

修正方案 #

第一步：补充删除专属的ActionType #

在constants/ActionTypes中新增删除城市的类型定义：

// 新增字段
export const DELETE_CITY = 'DELETE_CITY'

第二步：调整Reducer逻辑 #

拆分查询和删除的逻辑，修改后的Reducer代码如下：

import ActionTypes from "../constants/ActionTypes";

const initialState = {
  myCities: [],
  aCity: {},
  getCityById: {},
};

export const WeatherReducer = (state = initialState, { type, payload }) => {
  switch (type) {
    case ActionTypes.GETBY_CITYNAME:
      return {
        ...state,
        aCity: payload,
        myCities: [...state.myCities, payload],
      };
    case ActionTypes.GETCITYBYID:
      return {
        ...state,
        getCityById: payload,
        // 该Action仅负责存储查询到的单城市信息，不修改城市列表
      };
    // 新增删除城市的独立分支
    case ActionTypes.DELETE_CITY:
      return {
        ...state,
        // 直接过滤当前城市列表，返回新数组即可避免嵌套
        myCities: state.myCities.filter(item => item.id !== payload.cityId)
      };
    default:
      return state;
  }
};

第三步：修改删除触发逻辑 #

调整触发删除的回调函数，不再复用查询单城市的Action：

const HandleDelete = (cityId) => {
  // 若删除需要调用后端接口，可先请求接口成功后再执行dispatch
  dispatch({
    type: ActionTypes.DELETE_CITY,
    payload: { cityId }
  });
};

内容的提问来源于stack exchange，提问作者Ceren Keklik