Save in redux data as array of object in state and update state if state has previous state availabl-CodePudding

I receive my Response as the below format example

const response = {
  data: [{
      name: "abc",
      age: "10",
      id: "10"
    },
    {
      name: "def",
      age: "15",
      id: "20"
    },
  ],
  name: "abc"
}

I want to save it in my redux state is, if the response.name and property name matches and save it as an array of object. The response.name is abc and object has name abc

Expected state

"abc": [
    {
      "name": "abc",
      "age": "10",
      "id": "10"
    },
  ]

Case 2 I receive a new Response with a new object abc with a different id and age with response.name same abc,

const response = {
  data: [{
      name: "abc",
      age: "10",
      id: "10"
    },
    {
      name: "abc",
      age: "15",
      id: "20"
    },
    {
      name: "def",
      age: "15",
      id: "20"
    },
  ],
  name: "abc"
}

I need to update if a new object set is present in the state

"abc": [
    {
      "name": "abc",
      "age": "10",
      "id": "10"
    },
    {
      name: "abc",
      age: "15",
      id: "20"
    }
  ]

Case 3 Now I receive a new response with a different response name response.name = "def"

const response = {

  data: [{
      name: "abc",
      age: "10",
      id: "10"
    },
    {
      name: "def",
      age: "15",
      id: "20"
    },
  ],
  name: "def"
}

Here def is the response.name , so I need to create a new array of objects like the below :

"def": [
    {
      "name": "def",
      "age": "15",
      "id": "10"
    },
  ]

and My state should be having both

data : [
"abc": [
    {
      "name": "abc",
      "age": "10",
      "id": "10"
    },
]
"def": [
    {
      "name": "def",
      "age": "15",
      "id": "10"
    },
  ]
]

With the below code, i tried it replaces the old state

const initialUserState = {
    arr:[]
}

export default function userState(state = initialUserState, action)
{
    let response = action.payload;
    console.log(arr);
    switch (action.type)
    {
        case ADD_ITEM: 
             const createSet = (someData) => {
             let key = someData.name
             let data = someData.data.filter(e => e.name === key)
                 return {
                 [key]: data
                }
             }
            console.log(createSet(response))
           let createdArray = createSet(response);
            return { 
                      arr[createdArray];
                   }

        default:
            return state
    }
}

CodePudding user response：

Can you have a look :

const response = {
  data: [{
      name: "abc",
      age: "10",
      id: "10"
    },
    {
      name: "abc",
      age: "15",
      id: "20"
    },
    {
      name: "def",
      age: "15",
      id: "20"
    },
    {
      name: "def",
      age: "15",
      id: "20"
    },
  ],
  name: "abc"
}

const response2 = {

  data: [{
      name: "abc",
      age: "10",
      id: "10"
    },
    {
      name: "def",
      age: "15",
      id: "20"
    },
  ],
  name: "def"
}

var state = {};
function getState(response) {
  let lookup = response.data.reduce((a, e) => {
    a[e.name] = (response.name == e.name) || 0;
    return a;
  }, {});
  
  state[response.name] = response.data.filter(e => lookup[e.name]);
}

getState(response);
getState(response2);
console.log(state);

CodePudding user response：

You are doing a lot of things here that seem unnecessary. If you only want to add an item, add an item. No filtering etc. needed.

export default function userState(state = initialUserState, action) {
  let response = action.payload;
  switch (action.type) {
    case ADD_ITEM:
      return {
        // assuming that what you want to add is `action.payload`
        arr: state.arr.concat(action.payload),
      };
    default:
      return state;
  }
}

That said, all of this is an extremely outdated (pre-2019) style of Redux that you should not be writing today. Modern Redux does not have switch..case reducers, action type constants like ADD_TYPE and no need for immutable reducer logic.
Please take the time and read up on modern Redux and take the time to follow the official Redux Tutorial.