Question

我有一个动作，使用多个调用从数据库中提取一些数据。我正在尝试为reducer中的数据创建正确的结构，但是对象的更深层次才会被覆盖。

React call：

_.forEach(['cat1', 'cat2', 'cat3', 'cat4'], (category) => {
    _.forEach(['day1', 'day2', 'day3'], (day) => {
        this.props.fetchSingleResult('2018', 'USA', day, category)
    })
})

我的行动：

export function fetchSingleResult(year, venue, day, category) {
// Get race result from a single category and day
const request = axios.get('/api/races/singleresult',
    {params: {
        year: year,
        venue: venue,
        day: day,
        category: category }
    });
return {
    type: FETCH_SINGLE_RESULT,
    payload: request,
    meta: {year: year, venue: venue, day: day, category: category}
};
}

我的减速机：

case FETCH_SINGLE_RESULT:
        return {...state,
            [action.meta.year]: {...state[action.meta.year],
                [action.meta.venue]: {...state[action.meta.venue],
                    [action.meta.category]: {...state[action.meta.category],
                        [action.meta.day]: action.payload.data}}}};

这是一个来自它的对象只有最后一天和类别作为键，即

{2018: {'USA': {'cat4': {'day3' : data}}}}

而不是像所有类别和日期一样：

{2018: 
    {'USA': 
        {'cat1': {'day1' : data, 'day2' : data, 'day3' : data}}, 
        {'cat2': {'day1' : data, 'day2' : data, 'day3' : data}}, 
        {'cat3': {'day1' : data, 'day2' : data, 'day3' : data}}, 
        {'cat4': {'day1' : data, 'day2' : data, 'day3' : data}}
     }
}

有什么想法吗？

有很多年和许多场地。

Answer 1

您使用点差运算符的方式是导致该结果，请尝试：

case FETCH_SINGLE_RESULT: 
  const {year, venue, category, day} = action.meta;
  return _.merge(state, {[year]: {[venue]: {[category]: {[day]: action.payload.data}}}});

Answer 2

首先看一下这种嵌套水平是非常难以维持和尊重不变的反应。您应该更改数据端点的响应结构。

const getnewState = (state, action) => {
const initialStateValue = {...state }
const { year, venue, day, category } = action.meta
const data = action.payload
  if(initialStateValue[year]) {
    const currentYearValue = initialStateValue[year]
            if (currentYearValue[venue]) {
        const currentVenueValue = currentYearValue[venue]
        if(currentVenueValue[category]) {
          let currentCategoryValue = currentVenueValue[category]
            currentCategoryValue = {
          ...currentCategoryValue,
          [day]: data,
          }
        }
      }
  }
}

我刚刚处理了上面这段代码中的一个流程，你需要照顾其他的场景，如果关键是我自己不适合所有级别.. 我继续为此编写解决方案，但发现代码过于复杂。

减速器中更深层次被覆盖

2 个答案: