How to delete nested state object in immutable-js inside reducer?

Question

I want to delete an entity from data (which is List inside object someData). I am using fromJS of immutable js in my reducer to keep the state immutable

I tried using updateIn, deleteIn, update, removeIn and whatever I could find on immutable-js. But it didn't work for me. Most probably I am using these functions the wrong way.

import { fromJS, updateIn } from 'immutable';
import * as type from './constants';

export const initialState = fromJS({
  someData: [],
  loading: true,
});

function someReducer(state = initialState, action) {
  switch (action.type) {
    case type.DELETE_SINGLE_ENTITY:
      updateIn(state, ['someData', 'data'], val =>
        val.filter(x => x.id !== action.id),      
      );
      return state;
    default:
      return state;
  }
}

export default someReducer;

//example someData

/*
{
    date: "",
    data: [
        {
            "id": "1",
            "machine_type": "xyz",
            "created_time": "2019-06-18T10:36:60Z",
            ...
        },
        {
            "id": "22",
            "machine_type": "abc",
            "created_time": "2019-06-20T10:36:60Z",
            ...
        },
        {
            "id": "2",
            "machine_type": "kjhkh",
            "created_time": "2019-06-11T12:36:60Z",
            ...
        }
    ]
}
*/

I want to delete an entity matching with the id passed in action. Before deleting the output of state.get('someData') is in the above example. My expected output (when action.id is 2) when I type state.get should be:

{
    date: "",
    data: [
        {
            "id": "1",
            "machine_type": "xyz",
            "created_time": "2019-06-18T10:36:60Z",
            ...
        },
        {
            "id": "22",
            "machine_type": "abc",
            "created_time": "2019-06-20T10:36:60Z",
            ...
        }
    ]
}

just create a new object spreading out the state then also specify the someData property on the new object with the array returned from someData.filter — tytyf
– tytyf, Commented Aug 24, 2019 at 16:57
@21x37 My problem was little bit different I didn't want to do it by defensive cloning . Anyways thanks for help. — Lalit Jharbade
– Lalit Jharbade, Commented Aug 24, 2019 at 18:22

Lalit Jharbade · Accepted Answer · 2019-08-24 18:37:43Z

1

Finally! Got it! this:

      return updateIn(state, ['someData', 'data'], val =>
        val.filter(x => x.id !== action.id),      
      );

instead of this:

      updateIn(state, ['someData', 'data'], val =>
        val.filter(x => x.id !== action.id),      
      );
      return state;

Previously I thought updateIn would update the state itself but it doesn't it returns the updated object. So just returning the updateIn would be fine.

answered Aug 24, 2019 at 18:37

Lalit Jharbade

511 silver badge4 bronze badges

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

Comments

Emil · Accepted Answer · 2019-08-24 18:19:46Z

0

You can do it using the filter function

const sampleData = [{id: 1},{id: 2},{id: 3}]

const idToRemove = 2;

const updatedData = sampleData.filter(el => {
  return el.id !== idToRemove
})

console.log(updatedData);

answered Aug 24, 2019 at 18:19

Emil

1,3151 gold badge10 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to delete nested state object in immutable-js inside reducer?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related