react+redux reducer 处理 null答案

【问题标题】：react+redux reducer handling with nullreact+redux reducer 处理 null
【发布时间】：2016-12-05 08:40:12
【问题描述】：

immutablejs Map 有一些 redux 存储。需要在字段中添加“历史”项。

    "data":{
        "country": {
            "value": "US",
            "status": "locked",
            "history": null
        },
        "city": {
            "value": "NY",
            "status": "rejected",
            "history": [
                {
                    "value": "NY",
                    "date": 1447366980,
                    "reason": "bad"
                },
                {
                    "value": "WA",
                    "date": 1447331640,
                    "reason": "badbadnotgood"
                }
            ]
        },
        "event_title": {
            "value": "test",
            "status": "new",
            "history": null
        }
    }

处理 reducer 的帮助：

case SET_HISTORY:
        return state
            .updateIn(['data', payload.item, 'history'],
                item => item.push(new Map({
                    reason: payload.value,
                    date: payload.date,
                    value: payload.value
                }))
            )

但是如果 history 为 null 则会出现无法推送未定义的错误。

处理它的最佳做法是什么？

【问题讨论】：

状态上的updateIn 是什么？你在 state 上使用任何 redux 中间件吗？
是Map的immutablejs方法

标签： reactjs redux immutable.js

【解决方案1】：

因为历史是null，而null没有push方法`，所以会抛出错误。

添加一个回退初始化item || []，如果item 是null，它将为历史分配一个新数组：

case SET_HISTORY:
  return state
    .updateIn(['data', payload.item, 'history'],
      // concat will return a new array, push will return the length of the array
      item => (item || []).concat(new Map(Object.entries({ // we need Object.entries because map expects an array of arrays, not an object 
        reason: payload.value,
        date: payload.date,
        value: payload.value
      })))
    )

示例查看浏览器的控制台，因为 SO sn -p 无法显示 Map：

const payload = {
  item: 'event_title',
  value: 5,
  date: new Date(),
  reason: 'whatever'
};

let state = Immutable.fromJS({
  "data": {
    "country": {
      "value": "US",
      "status": "locked",
      "history": null
    },
    "city": {
      "value": "NY",
      "status": "rejected",
      "history": [{
        "value": "NY",
        "date": 1447366980,
        "reason": "bad"
      }, {
        "value": "WA",
        "date": 1447331640,
        "reason": "badbadnotgood"
      }]
    },
    "event_title": {
      "value": "test",
      "status": "new",
      "history": null
    }
  }
});

state = state
  .updateIn(['data', payload.item, 'history'],
    item => (item || []).concat(new Map(Object.entries({
      reason: payload.reason,
      date: payload.date,
      value: payload.value
    }))));

console.log(state.toJS());

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js"&gt;&lt;/script&gt;

【讨论】：