Pushing Object Into Nested Reducer Array?

Question

QUESTION: What's the best way to push a new payload object, to a nested redux reducers state?

I would like to push a new item location to the current lists array within the reducers function, using the current state index values.

MY CURRENT REDUX ACTION:

export const addLocation = () => {
  return (dispatch) => {
    axios.post("/inventory/lists/addlocation", locationData).then((res) => {
        dispatch({
          type: ADD_POSTED_LOCATION,
          payload: {location: "test", count: 0, _id: "6a5e4f6ae51g6ea5r1ga6e1rf"},
        });
    });
  };
};

MY CURRENT REDUCER:

const initialState = {
  lists: [],
  currentIndex: {
    listIndex: null,
    itemIndex: null,
    locationIndex: null
  },
};

export default function(state = initialState, action) {
  switch (action.type) {
    case ADD_POSTED_LOCATION:
      const listIndex = state.currentIndex.listIndex;
      const itemIndex = state.currentIndex.listIndex;
      return {
        ...state,
        lists: state.lists[listIndex ].items[itemIndex].locations.push(action.payload)
      };

My current result is simple:

lists: [a number, excluding the list objects and values]

DESIRED RESULT:

Lists: [

    {
      _id: "L1",
      items: [{
          number: "n1",
          locations: [{
            location: "L1"
          }, {
            location: "L2"
          }]
        },
        {
          number: "n2",
          locations: [{
              location: "L1"
            }, {
              location: "L2"
            },
            {
              location: "L3"
            },
            {
              location: "L4"
            }, {
              location: "L5"
            }
          ]
        }
      ]

    ]

Drew Reese · Accepted Answer · 2020-10-28 00:01:28Z

1

You should always shallow copy any part of state you are updating, including nested arrays and objects.

export default function (state = initialState, action) {
  switch (action.type) {
    case ADD_POSTED_LOCATION:
      const listIndex = state.currentIndex.listIndex;
      const itemIndex = state.currentIndex.listIndex;
      return {
        ...state,
        lists: state.lists.map((list, lIndex) =>
          lIndex === listIndex
            ? {
                ...list,
                items: list.items.map((item, iIndex) =>
                  iIndex === itemIndex
                    ? {
                        ...item,
                        locaitons: [...item.locations, action.payload]
                      }
                    : item
                )
              }
            : list
        )
      };
  }
}

answered Oct 28, 2020 at 0:01

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user14440113 Over a year ago

Hey Drew, I did some more testing with this. The code only adds the object to the first item of the first list. The issue is that I have multiple lists, with multiple items per list, with multiple locations per item.

Drew Reese Over a year ago

@pc.dependency Do you have a working example of this I could also test? Maybe in a running codesandbox? I could see this happening if both state.currentIndex.listIndex and state.currentIndex.listIndex are 0.

user14440113 Over a year ago

my apologies, the issue was just grammar, thanks! I will upvote when i get to lvl 15!

Drew Reese Over a year ago

@pc.dependency Great! And no worries, I wasn't able to actually test that code so TBH it was entirely possible there was an issue with it.

score 0 · Accepted Answer · 2020-10-28 04:54:07Z

Fixed a few simple errors, and grammar. This is the Solution, Thanks Drew!

I learned that you must make shallow copies of your nested object structure using the spread operator (...). Also, utilizing the optional .map() index parameter allows you to use the mapped array's index values to compare with other index variables. Very Nice!

export default function(state = initialState, action) {
  switch (action.type) {
    case ADD_POSTED_LOCATION:
      return {
        ...state,
        lists: state.lists.map((list, lIndex) =>
          lIndex === state.currentIndex.listIndex ?
          {
            ...list,
            items: list.items.map((item, iIndex) =>
              iIndex === state.currentIndex.itemIndex ?
              {
                ...item,
                locations: [...item.locations, action.payload]
              } :
              item
            )
          } :
          list
        )
      };
  }
}

Collectives™ on Stack Overflow

Pushing Object Into Nested Reducer Array?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related