我如何從 React-Redux 中的 reducer 中的狀態更新對象數組中單個元素的名稱字段？

Question

以下是我的減速器的初始狀態：

const InitialState = {
    data:[],
    SelectUser : null,
    name: "Not Yet Selected"
};

下面是我從 api 獲取的數據 [] 狀態：

[
 {
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
 },
 {
  "id": 2,
  "name": "Ervin Howell",
  "username": "Antonette",
  "email": "Shanna@melissa.tv",
  "address": {
    "street": "Victor Plains",
    "suite": "Suite 879",
    "city": "Wisokyburgh",
    "zipcode": "90566-7771",
    "geo": {
      "lat": "-43.9509",
      "lng": "-34.4618"
    }
  },
  "phone": "010-692-6593 x09125",
  "website": "anastasia.net",
  "company": {
    "name": "Deckow-Crist",
    "catchPhrase": "Proactive didactic contingency",
    "bs": "synergize scalable supply-chains"
  }
 }
]

我想將 name 從 state data[]中的對象更改為 state name 。 其中object的id與SelecUser狀態object中的id相同。 SelectUser也是一個對象，其內容與data[]中的元素相同。 所有狀態都已設置。

以下是迄今為止創建的減速器：

const InitialState = {
    data:[],
    SelectUser : null,
    name: "Not Yet Selected"
};

export default (state=InitialState, action)=>{
    switch(action.type){
            case 'FETCH_USER':
                return {...state,data:action.payload};
            case 'USER_SELECTED':
                return {...state,SelectUser:action.payload};
            case 'USER_CHANGE':
                return {...state,name:action.payload};
            default:
                return state;
    }
};

所有提到的案例都是以前執行過的。

Answer 1

我想將名稱從狀態數據 [] 中的對象更改為具有相同 ID 的對象中的狀態名稱，該 ID 已存儲在 SelectUser 中

我假設您想根據某個action更改name ，為簡單起見，我將其稱為CHANGE_NAME 。

case 'CHANGE_NAME' return handleNameChange(state, action)

現在你只需要在數據中找到對應的對象， spread它的原始內容並覆蓋name

const handlerNameChange = (state, action) =>{
    const { name } = action

    return {
        ...state,
        data : state.data.map(item =>{
            if(item.id !== state.SelectUser.id) return item
            return {
                ...item,
                name
            }
        })
    }
}

Answer 2

試試這個，

export default (state=InitialState, action)=>{
    switch(action.type){
            case 'FETCH_USER':
                return {...state,data:action.payload};
            case 'USER_SELECTED':
                return {...state,SelectUser:action.payload};
            case 'USER_CHANGE':
                return {
                         ...state,
                         name: state.data.reduce((prev, item)=>{
                                  if(state.SelectUser && state.SelectUser.some(elt=>elt.id === item.id)){
                                      return item.name;
                                  }else{
                                      return prev;
                                  }
                         }, null);
                };
            default:
                return state;
    }
};