在Reducer中处理复杂对象

时间:2019-08-27 10:02:53

标签: react-native ecmascript-6 redux react-redux

我有一个复杂的数据,类似于下面给出的数据。

const initialState = {
    medicationschedule: [
        {
            date: '2019-08-27',
            medications: [
                {
                    title: '8.00 AM', 
                    id:'1111',
                    data: [
                        {name:'item1', isTaken: 1,mg: '500 mg',capsules:'capsule'}, 
                        {name:'item2', isTaken: 4,mg: '2000 mg',capsules:'teaspoon'}
                ]},
                {
                    title: '12.03 PM', 
                    id:'11112',
                    data: [
                        {name:'item3', isTaken: 2,mg: '500 mg',capsules:'capsule'}, 
                        {name:'item4', isTaken: 1,mg: '500 mg',capsules:'capsule'}
                ]},
                {
                    title: '3.30 PM', 
                    id:'11113',
                    data: [
                        {name:'item1', isTaken: 3,mg: '500 mg',capsules:'capsule'}
                ]},
            ]
        },
        {
            date: '2019-08-26',
            medications: [
                {
                    title: '8.00 AM', 
                    id:'11151',
                    data: [
                        {name:'item1', isTaken: 1,mg: '500 mg',capsules:'capsule'}, 
                        {name:'item2', isTaken: 4,mg: '2000 mg',capsules:'teaspoon'}
                ]},
            ]
        }
    ],
    selectedDate: Date()
};

现在,我必须更新药物阵列中的isTaken状态。我得到了足够的数据传递给我的reducer(dateString,idOfMedication,nameOfMedication)。但是我不得不继续在数组内部循环。

我的减速器

const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case CHANGE_DATE:
            console.log(action.payload)
            return {...state, selectedDate: action.payload}
        case CHANGE_MEDICATION_TAKEN_STATUS:
            console.log(action.date +" "+ action.id +" "+ action.name +" "+ action.takenStatus)
            return state;

    }

    return state;
};

我应该如何在减速器内部更改此状态。有人可以帮我吗?

1 个答案:

答案 0 :(得分:2)

您需要按日期查找时间表,并在时间表内按ID查找项目:

case CHANGE_MEDICATION_TAKEN_STATUS:
  const schedule = state.medicationschedule.map(schedule => {
    if (schedule.date === action.date) {
      schedule = {
        ...schedule,
        medications: schedule.medications.map(medication => {
          if (medication.id === action.id) {
            medication = {
              ...medication,
              isTaken: action.takenStatus
            }
          }
          return medication
        })
      }
    }
    return schedule;
  })

return {
  ...state,
  medicationschedule: schedule
};