CODEWITHSUNDEEP
javascriptreactjsreduxredux-thunk
Eli
Eli

Reputation: 25

Redux state disappears after inserting into a nested array

When trying to insert into my redux state, my state disappears,. I am checking to see if I have a parentId and if I do, I insert into the parents id children array, but if no parent id is provided, I simply insert the payload into the array. The last part works fine, the problem is with adding to the child array: Here is my codeL:

export default (categories = [], action) => {
  switch (action.type) {
    case 'GET_ALL_CATEGORIES':
      return action.payload;
      // I am having a problem with the case below
    case 'CREATE_CATEGORY':

      return action.payload.parentId
        ? categories.map((category) => {
            if (
              category._id.toString() === action.payload.parentId.toString()
            ) {
              return [
                ...category.children,
                {
                  _id: action.payload._id,
                  name: action.payload.name,
                  slug: action.payload.slug,
                  children: [],
                },
              ];
            } else {
              return [
                {
                  _id: action.payload._id,
                  name: action.payload.name,
                  slug: action.payload.slug,
                  children: [],
                },
              ];
            }
          })
        : [
            ...categories,
            {
              _id: action.payload._id,
              name: action.payload.name,
              slug: action.payload.slug,
              children: [],
            },
          ];
    default:
      return categories;
  }
};

Upvotes: 0

Views: 55

Answers (1)

Heri Hehe Setiawan
Heri Hehe Setiawan

Reputation: 1633

The first condition within CREATE_CATEGORY case, doesn't really return anything. You can try using the same approach you've already done in the second condition, i.e.:

[
  ...(categories.map((category) => {
        if (
          category._id.toString() === action.payload.parentId.toString()
        ) {
          return [
            ...category.children,
            {
              _id: action.payload._id,
              name: action.payload.name,
              slug: action.payload.slug,
              children: [],
            },
          ];
        } else {
          return [
            {
              _id: action.payload._id,
              name: action.payload.name,
              slug: action.payload.slug,
              children: [],
            },
          ];
        }
      }))
  ]

Final code:

export default (categories = [], action) => {
  switch (action.type) {
    case 'GET_ALL_CATEGORIES':
      return action.payload;
      // I am having a problem with the case below
    case 'CREATE_CATEGORY':

      return action.payload.parentId
        ? [
            ...(categories.map((category) => {
            if (
              category._id.toString() === action.payload.parentId.toString()
            ) {
              return [
                ...category.children,
                {
                  _id: action.payload._id,
                  name: action.payload.name,
                  slug: action.payload.slug,
                  children: [],
                },
              ];
            } else {
              return [
                {
                  _id: action.payload._id,
                  name: action.payload.name,
                  slug: action.payload.slug,
                  children: [],
                },
              ];
            }
          }))
        ]
        : [
            ...categories,
            {
              _id: action.payload._id,
              name: action.payload.name,
              slug: action.payload.slug,
              children: [],
            },
          ];
    default:
      return categories;
  }
};

Update

From the code, I assume there has been a mixed up between parent and children iteration. If a parent is an array of an object containing children property, then you would do:

 return {
    ...category,
    children: [
       ...category.children,
       {
              _id: action.payload._id,
              name: action.payload.name,
              slug: action.payload.slug,
              children: [],
       },
    ]
 }

Upvotes: 1

Related Questions