React+Rails应用中Redux Reducer导致API数据异常问题

嘿，这个问题其实就是个属性名拼写的小失误，咱们来理清楚前因后果：

先看你的代码细节：

1. 在Action里，你把后端返回的response.data.data作为payload dispatch给了Reducer
2. 你提到正常的后端响应里包含conversation属性，但你的Reducer却在尝试读取action.payload.conversations（注意这里多了个s）

问题根源 #

JavaScript中访问对象不存在的属性时，不会抛出错误，只会返回undefined。所以当你在Reducer里写return action.payload.conversations时，因为这个属性根本不存在，Redux的状态就被设置成了undefined，看起来就像是conversation属性"消失"了，但实际上是你读错了属性名。

修复方法 #

只需要修改Reducer里的一个字符——把conversations改成conversation（确保和后端返回的属性名完全一致）：

const InitialConversations = [] 
export default function conversations(state = InitialConversations, action) { 
  switch (action.type) { 
    case GET_CONVERSATIONS: 
      // 修正属性名拼写，匹配后端返回的字段
      return action.payload.conversation 
    default: 
      return state 
  } 
}

这样修改后，Reducer就能正确读取到后端返回的conversation数据，Redux里的状态就和Postman里的响应完全一致了。

内容的提问来源于stack exchange，提问作者Daniel Kukula