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

Question

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

我使用状态通过添加新的 HandObject 来更新单个会话对象，但是我想使用更新的 SessionObject 更新 redux 存储(如果可能的话，不可变)。

会话列表中会话对象的索引是 action.payload.Id(我想？我将显示我的会话对象构造函数)

**添加会话工作正常，我只更新会话中已有的会话

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

我的减速器，具有初始状态 商店.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;

会话对象构造函数 会话.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", []);

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

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

从堆栈导航器子组件。
然后在父组件中， 我打电话 (首页.js)

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

我的调度程序看起来像： (首页.js)

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

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

我想在会话列表的正确索引中将会话对象替换为 action.payload。

编辑*

会话.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
};

会话.js中的状态是会话对象

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;
}, {});
};

更新

根据此处的要求，以下是添加、更新、替换和删除处理程序，而无需更改对象的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)
};