Add a Object into state with array of Object by Redux

Question

when my backend send a payload with value:

Object {
  "__v": 0,
  "_id": "621ef5eec33b5c6d9d184563",
  "category": "621ef5e8c33b5c6d9d18455e",
  "createdAt": "2022-03-02T04:43:26.834Z",
  "description": "",
  "name": "Hair and Nails",
  "price": 50,
  "updatedAt": "2022-03-02T04:43:26.834Z",
},

How to add this Object to my serviceReducer const initialState = { isLoading: false, error: false, serviceCategories: [], //! serviceCategories is a Array }; first of all, I map serviceCategories and selected serviceCategories that I need

        return {
            ...state,
            serviceCategories: state.serviceCategories.map((serviceCateogory) => {
                return serviceCateogory._id === action.payload.category 
                ? serviceCateogory //! here How I to add that object to services of serviceCateogory
                : serviceCateogory;
            }),
            // ),
        };

this is Structure of serviceCategories:

[
 Object {
  "__v": 0,
  "_id": "621ef5e8c33b5c6d9d18455e",
  "createdAt": "2022-03-02T04:43:20.754Z",
  "name": "Category1",
  "services": Array [
    Object {
      "__v": 0,
      "_id": "621ef5eec33b5c6d9d184563",
      "category": "621ef5e8c33b5c6d9d18455e",
      "createdAt": "2022-03-02T04:43:26.834Z",
      "description": "",
      "name": "Service1",
      "price": 50,
      "updatedAt": "2022-03-02T04:43:26.834Z",
    },
    Object {
      "__v": 0,
      "_id": "621ef7d1c33b5c6d9d1845b1",
      "category": "621ef5e8c33b5c6d9d18455e",
      "createdAt": "2022-03-02T04:51:29.262Z",
      "description": "",
      "name": "Service2",
      "price": 50,
      "updatedAt": "2022-03-02T04:51:29.262Z",
    },
  ],
  "updatedAt": "2022-03-02T05:08:35.520Z",
},
 Object {
  "__v": 0,
  "_id": "621ef5e8c33b5c6d9d18455e",
  "createdAt": "2022-03-02T04:43:20.754Z",
  "name": "Category2",
....
]

Asad Haroon · Accepted Answer · 2022-03-02 06:00:31Z

1

You need to first findIndex of the specific category from the redux state and then append the service in it. Like:

let categories=[...state.serviceCategories];     
let catIndex=categories.findIndex((item)=>item._id===action.payload.category);
if(catIndex!=-1) categories[catIndex].services.push(object); // append object (service) as you wish.
state.serviceCategories=categories;

edited Mar 2, 2022 at 6:00

answered Mar 2, 2022 at 5:46

Asad Haroon

4923 silver badges9 bronze badges

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

7 Comments

victhangnguyen Over a year ago

I too try this way, but when I use "push" and "return" cmd then it make a warning, [Unhandled promise rejection: Error: [Immer] An immer producer returned a new value and modified its draft. Either return a new value or modify the draft.] I dont know How to fix that,

Asad Haroon Over a year ago

Are you using redux toolkit?

Asad Haroon Over a year ago

In redux toolkit we dont have to return new state object as it does automatically. So if you want to change the specific state just use state.entity=newValue; I have changed the code please follow it

Asad Haroon Over a year ago

@victhangnguyen issue fixed now?

victhangnguyen Over a year ago

Thank you so much..., I know Redux toolkit supports this, But many times using return new state is fine, making me imagized it support too. I need to read a lot about Toolkit documentation again, once Thank you again.

|

Collectives™ on Stack Overflow

Add a Object into state with array of Object by Redux

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related