如何用双重嵌套的对象数组不变地更新/替换 React Redux 状态？

Question

我的 redux 状态有一个 SessionList，它是一个 SessionObjects 数组，每个 SessionObject 都有一个 HandObjects 数组。

我使用状态通过添加新的 HandObjects 来更新单个 SessionObjects，但是我想用我更新的 SessionObject 更新 redux 存储（如果可能，不可变）。

SessionList 中 SessionObject 的索引是 action.payload.Id（我想？我会展示我的 SessionObject 构造函数）

**添加会话工作得很好，我只用商店中已有的会话更新会话

我已经尝试了我能找到的每个链接，但我的代码完全不同，以至于我似乎无法正确更新我的 SessionList。

我的减速器，初始状态 store.js（我的减速器所在的位置）

const initialState = {
    SessionList: [],
}
...
case "UPDATE_SESSION":
            //action.payload is a SessionObject
            //action.payload.Id is the Id that i want to update
            // i want to set SessionList[action.payload.Id] = action.payload
            state = {
                ...state,
                SessionList : state.SessionList.map((item, index) => {
                    if (index != action.payload.id) {
                      return item
                    }

                    return action.payload
                    //This code doesn't visibly do anything that I can find
                  })

                // *******FIRST TRY*******
                // ...state,
                //  SessionList: {
                //     ...state.SessionList,
                //     SessionList[action.payload.id] : action.payload 
//syntax error, but basically what i want to do
                //      }
                // }
                // ***********************
            };
            break;

SessionObject 构造函数 会话.js

export function SessionObject(_id, _name, _hands) {
    this.id = _id, //int
    this.name = _name, //string
    this.HandList = _hands //array of HandObject objects
}
var defaultSession = new SessionObject(0, "default", []);

*如果我做错了， 我打电话 (Session.js)

this.props.navigation.state.params.updateMethod(this.state.Session); //update store

来自堆栈导航器子组件。
然后在父组件中， 我打电话 (Home.js)

UpdateSession = (session) => {
      this.props.updateSession(session);
    };

我的调度员看起来像： (Home.js)

updateSession: (session) => {
        dispatch({
          type: "UPDATE_SESSION",
          payload: session
        });
      }

通过测试，我有点确定我的减速器被正确调用了。

我想在 SessionList 的正确索引中将 SessionObject 替换为 action.payload。

编辑 *

Session.js

addItem = () => {
        this.setState((state, props) => ({
        Session : {
          ...state,
          HandList: [...state.Session.HandList, new HandObject(state.HandCount)]
        },
        HandCount : state.HandCount + 1,
        }));
        this.props.navigation.state.params.updateMethod(this.state.Session); //update store
    };

Session.js 中的状态是一个 SessionObject

Answer 1

要获得SessionList[action.payload.Id] 的结果，您需要将SessionList 初始化为对象而不是数组。然后你可以相应地更新。

   const initialState = {
      SessionList: {},
   }

   case "UPDATE_SESSION":
            state = {
                ...state,
                SessionList: Object.keys(state.SessionList).reduce((acc, id) => {
                    if (id === action.payload.Id) {
                      acc[id] = action.payload;
                    } else {
                      acc[id] = state.SessionList[id];
                    }

                    return acc;
                  }, {});
            };

更新

根据here 的要求，以下是 add、update、replace 和 delete 处理程序，无需更改SessionList 到一个对象。

const initialState = {
     SessionList: [],
}

注意：action.payload（无论在哪里使用）是一个会话对象。

添加

state = {
    ...state,
    SessionList: [...state.SessionList, action.payload];
};

更新

state = {
    ...state,
    SessionList: state.SessionList.map((session) => {
        if (session.Id === action.payload.Id) {
           return Object.assign({}, session, action.payload);
        }

        return session;
    })
};

替换

state = {
    ...state,
    SessionList: state.SessionList.map((session) => {
        if (session.Id === action.payload.Id) {
           return action.payload;
        }

        return session;
    })
};

删除

state = {
    ...state,
    SessionList: state.SessionList.filter((session) => session.Id !== action.payload.Id)
};