How can I return the state correctly in my Redux app?

Question

We have some todo list. We have initialState kind of of like...

initialState = [   {
  id: 0,
  title: "first",
  items: [
    {
      title: "one from first",
      id: 0,
      cards: [
        {
          id: 0,
          text: "111",
        },
        {
          id: 1,
          text: "222",
        },
      ],
    },
    {
      title: "two from first",
      id: 1,
      cards: [
        {
          id: 0,
          text: "www",
        },
        {
          id: 1,
          text: "zzz",
        },
      ],
    },
  ],   },   {
    id: 1,
    title: "second board",
    items: [
      {
        title: "first from second",
        id: 0,
        cards: [
          {
            id: 0,
            text: "asd",
          },
          {
            id: 1,
            text: "fasdf",
          },
        ],
      },
    ],   }, ];

We wont normalize this state for some reasons. I have to add new List. The reducer here:

switch(action) {
  case CONSTANTS.ADD_LIST:
    const newList = {
      title: action.payload.title,
      cards: [],
      id: listID,
    };
    listID += 1;

    return {
      ...state,
      [action.payload.boardID]: {
        ...state[action.payload.boardID],
        items: [...state[action.payload.boardID].items, newList],
      },
    };
}

Example. I want to add newList for items from board 1(starting from 0).

I tested another examples like the above and it's useless.

So I can't get why it's not working. I think I have some problems with docs redux and I can't get it.

Thanks!

user_7352020 · Answer

Your initialState seems to be an Array and not an object:

initialState = [ {Board1},{Board2} ]

But your reducer seems to be returning an object, so perhaps thats a potential issue.

======

You could instead try the following changes in your reducer:

make shallow copy of boardsArr aka initialState
loop over each board and create a new board object
Loop over each board object's items prop, and create its shallow copy
loop each item's cards prop and create its copy
finally replace the board's items you want and then
return the newly created boardsArr

// Pseudo code inside reducer

const newBoardsArr = state.map(board => {
    return {
        ...board,
        items: board.items.map(item => ({
            ...item,
            cards: item.cards.map(card => ({
                ...card
            }))
        }))
    }
});

// lets say we want to update first board's items, then:

newBoardsArr[action.payload.boardID].items = newList;
return newBoardsArr;

How can I return the state correctly in my Redux app?

1 Answers