通过 Redux Reducer 中的键附加到数组访问

Question

I'm trying to add to my state within a reducer. I need to access a key, and then add to an array within that key. This is what my state currently looks like:

{teamMembers: {
    PersonId1: [{ object1 }, {object2 }]
    PersonId2: [{ object3 }, { object4 }]
    PersonId3: [{ object5 }, { object6 }]
}}

I need to access a PersonId , based on what the action inputs, and then append an item from the action to the array. Ideally it would also create a new key and array if the key PersonId didn't already exist.

Answer 1

In your reducer, just do a little data manipulation. Remember to only manipulate a copy of your state and not your actual state.

const action = {
  payload: {
    personId: 'PersonId4',
    item: {}
  }
}

const state = {
    PersonId1: [{ object1 }, {object2 }]
    PersonId2: [{ object3 }, { object4 }]
    PersonId3: [{ object5 }, { object6 }]
}
const {personId, item} = action.payload
let newState = {...state}
if (personId in newState) {
  newState[personId].push(item)
} else {
  newState[personId] = [item]
}
return newState

Answer 2

You can conditionally check for the existence of the key and then add it to an already existing array or create a new one.

Something like this:

const newItems = state[id] ? [...state[id], ...items] : items;
//...
return {
  ...state,
  [id]: newItems
}

Note that i'm using the object spread syntax which is a proposal (in stage 3 ) and you need the babel plugin babel-plugin-transform-object-rest-spread to support it (or babel stage 3 preset ).

Running example:

 const initialState = { teamMembers: { PersonId1: [{ name: 'object1' }, { name: 'object2' }], PersonId2: [{ name: 'object3' }, { name: 'object4' }], PersonId3: [{ name: 'object5' }, { name: 'object6' }] } }; const actionOne = { type: 'ADD', payload: { id: 'PersonId2', items: [{ name: 'object444' }] } } const actionTwo = { type: 'ADD', payload: { id: 'PersonId777', items: [{ name: 'object777' }] } } const reducer = (state = {}, action) => { switch (action.type) { case 'ADD': { const { id, items } = action.payload; const newItems = state[id] ? [...state[id], ...items] : items; return { ...state, [id]: newItems } } default: return state; } } const reducerResultOne = reducer(initialState.teamMembers, actionOne); console.log('reducerResultOne', reducerResultOne); const reducerResultTwo = reducer(initialState.teamMembers, actionTwo); console.log('reducerResultTwo', reducerResultTwo);