Reducer Element hinzufügen und Element in einer Reihe von Objekten ohne Mutation aktualisieren

Hallo erstellter Reduzierer und frage mich, ob dieses Muster richtig ist.

Ich versuche zu:

Neues Element in Array von Objekten ACTION_TYPE hinzufügen

Aktualisieren Sie das Element im Array von Objekten ACTION_TYPE_EDIT, dieses sollte eigentlich die Wohltätigkeitsstütze setzen und das Element im Array Wohltätigkeitsorganisationen aktualisieren

Ich frage mich, ob ich auf dem richtigen Weg bin, ich möchte nicht mutieren, also hier ist mein Code.

export const reducerCharities = (
 state: CharityReducerState,
 action: CharitiesAction
 | CharityEditAction
) => {
 switch (action.type) {
 case ACTION_TYPE_EDIT:
 return {
...state,
 charity: {
...state.charity,
...(action.charity || {}),
 },
 charities: [
...state.charities.map(item => item.id === action.charity?.id? {...item,...action.charity }: item)
 ]
 }
 case ACTION_TYPE:
 return {
...state,
 charities: [
...state.charities || [],
...action.charities
 ]
 }
 default:
 return state
 }
}

Meine Frage ist also, wird dieser Teil den Zustand verändern oder gibt es einen besseren Weg, dies zu schreiben?

charities: [
...state.charities.map(item => item.id === action.charity?.id? {...item,...action.charity }: item)
 ]

Ist dies der richtige Ansatz, um ein neues Element zum Array hinzuzufügen?

 {
...state,
 charities: [
...state.charities || [],
...action.charities
 ]
 }

Lösung des Problems

Der einfachste (und seit 2019 offiziell empfohlene) Weg, dies zu tun, wäre die Verwendung des offiziellen Redux Toolkit-Pakets und der createSliceMethode.

Darin können Sie einfach mutieren und müssen sich nicht um manuelle unveränderliche Updates kümmern - das Paket übernimmt für Sie.

So könnte der Code aussehen

const charitiesSlice = ({
 name: 'charities',
 initialStae: myInitialState,
 reducers: {
 edit(state, action: PayloadAction<Charity>){
 const charity = state.charities.find(item => item.id === action.payload.id)
 if (charity) {
 Object.assign(charity, action.payload)
 }
 state.charity = action.payload
 }
 }
}
 
export const { edit } = charitiesSlice.actions
export const reducerCharities = charitiesSlice.reducer