Redux 初始状态导致未定义错误答案

【问题标题】：Redux initial state causes undefined errorRedux 初始状态导致未定义错误
【发布时间】：2019-08-04 14:47:08
【问题描述】：

我正在学习一个 udemy 课程来学习 codePen 上的 redux 编码，但是，我收到了以下错误。

redux.min.js:1 Uncaught TypeError: Cannot read property 'name' of undefined
at policies (pen.js:61)
at redux.min.js:1
at Array.forEach (<anonymous>)
at redux.min.js:1
at e.combineReducers (redux.min.js:1)
at pen.js:73

它告诉我这是因为策略减速器函数中的名称无法读取 action.payload.name，因为它是未定义的。我没有看到导师有同样的问题，但我已经忠实地检查了我的代码，它与他的相同。我只是不明白如何修复它以正确显示状态。

我已调试并尝试解决此问题，但到目前为止，除非我从策略缩减程序函数中删除 action.payload.name，否则代码一直抛出错误。

console.clear();
// people dropping off a form (Aaction Creator)

const createPolicy =(name, amount)=>{
  // console.log(name,amount,'test createpolicy')
  return { // Action (a form in our analogy)
    
    type:'CREATE_POLICY',
    payload: {
      name:name,
      amount: amount
    }
  };
};

const deletePolicy = (name) =>{
  return {
    type:'DELETE_POLICY',
    payload:{
      name: name     
    }
  }
}

const createClaim = (name, amountOfMoneyToCollect) =>{
  return {
    type:'CREATE_CLAIM',
    payload:{
      name: name,
      amountOfMoneyToCollect: amountOfMoneyToCollect
    }
  };
};


// Reducers (Departments!)
// default oldListOfClaims=[] is for initial state. 
const claimsHistory=(oldListOfClaims=[], action)=>{
  if(action.type==="CREATE_CLAIM"){
    // we care about this action (FORM!)
    return [...oldListOfClaims, action.payload];
  }
  // we don't care the action (FORM!)
  return oldListOfClaims;
};

const accounting=(bagOfMoney=100, action)=>{
  if(action.type==='CREATE_CLAIM'){
    return bagOfMoney - action.amountOfMoneyToCollect;
  }
  else if(action.type==='CREATE_POLICY'){
    return bagOfMoney + action.payload.amount;
  }
  return bagOfMoney;
}

const policies = ( listOfPolicies = [], action)=>{
  if(action.type = 'CREATE_POLICY'){
      console.log( action.payload,'test playload name')
    return [...listOfPolicies,action.payload.name]
  }
  else if(action.type='DELETE_POLICY'){

     return listOfPolicies.filter(name =>
        name!==action.payload.name);
  }
  return listOfPolicies;
};

const { createStore, combineReducers} = Redux;

const ourDepartments = combineReducers ({
  accounting: accounting,
  claimsHistory: claimsHistory,
  policies: policies
})

const store = createStore(ourDepartments);

console.log(store)


store.dispatch(createPolicy('Alex', 20));
store.dispatch(createPolicy('Jim', 30));
store.dispatch(createPolicy('Bob', 40));
console.log(store.getState());

我希望在新名称和金额发送到商店后看到当前状态的 console.log。并找出为什么这个错误不断发生。

【问题讨论】：

标签： redux react-redux

【解决方案1】：

查看您的policies reducer - 在检查您的类型时，您是在分配而不是与操作类型进行比较。将其更新为以下代码：


const policies = ( listOfPolicies = [], action)=>{
  // previously if(action.type = 'CREATE_POLICY'){
  if(action.type === 'CREATE_POLICY'){
      console.log( action.payload,'test playload name')
    return [...listOfPolicies,action.payload.name]
  }
  // previously else if(action.type='DELETE_POLICY'){
  else if(action.type==='DELETE_POLICY'){

     return listOfPolicies.filter(name =>
        name!==action.payload.name);
  }
  return listOfPolicies;
};

【讨论】：