时间戳

首页 > 解决方案 > 在 Reducer 中处理复杂对象

react-native - 在 Reducer 中处理复杂对象

问题描述

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

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;
};

我应该如何在减速器中改变这个状态。有人可以帮我吗。

标签： react-nativeecmascript-6reduxreact-redux

解决方案

您需要按日期查找时间表，并在时间表内按 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
};

推荐阅读