Reducer没有将对象添加到数组,而是添加了null

时间:2018-08-08 18:01:52

标签: javascript ecmascript-6 redux

对于Redux的练习,我在index.js中

const state = [
  {
    resort: 'Jay Peak',
    date: '2018-2-22',
    powder: true,
    backcountry: false,
  },
];

const action = {
  type: constants.ADD_DAY,
  payload: {
    resort: 'Mad River Glen',
    date: '2018-3-14',
    powder: true,
    backcountry: false,
  },
};

const nextState = allSkiDays(state, action);

console.log(`

  initial state: ${JSON.stringify(state)}
  action: ${JSON.stringify(action)}
  new state: ${JSON.stringify(nextState)}

  `);

和我的还原剂

export const skiDay = (state = [], action) => {
  action.type === constants.ADD_DAY ? action.payload : state;
};

export const allSkiDays = (state = [], action) => {
  switch (action.type) {
    case constants.ADD_DAY:
      return [...state, skiDay(null, action)]; // COMPOSITION!!!! use skiDay()
    default:
      return state;
  }
};

我一直得到这个结果,

  initial state: [{"resort":"Jay Peak","date":"2018-2-22","powder":true,"backcountry":false}]
  action: {"type":"ADD_DAY","payload":{"resort":"Mad River Glen","date":"2018-3-14","powder":true,"backcountry":false}}
  new state: [{"resort":"Jay Peak","date":"2018-2-22","powder":true,"backcountry":false},null]

我已经尝试了很多方法,为什么null仍然被散布到数组而不是新对象上?

1 个答案:

答案 0 :(得分:1)

该减速器不返回下一个状态。

export const skiDay = (state = [], action) => {
  action.type === constants.ADD_DAY ? action.payload : state;
};

执行此操作:

export const skiDay = (state = [], action) => {
  return action.type === constants.ADD_DAY ? action.payload : state;
};