Question

麻烦！请帮助。我将非常感激！
在这个对象中，我应该以不可变的方式更新仅注释数组（所有这些只是一个模拟数据，都没有关系）：

const initialState = {
  news: [
    {
      id: 1,
      text: 'Hello!',
      createdBy: '',
      comments: [{ id: 0, author: 0, commentText: 0 }]
    },
    {
      id: 2,
      text: 'TEST',
      createdBy: '',
      comments: [{ id: 11, author: 11, commentText: 11 }, { id: 12, author: 12, commentText: 12 }]
    },
    {
      id: 3,
      text: 'TEXT:)',
      createdBy: '',
      comments: []
    }
  ]
}

这真的很难...我尝试了很多变体，但是没有成功...（
我的减速器：

const newsReducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.ADD_COMMENT:
      const { id, author, commentText, newsItemId } = action.payload;
      // which element to update
      const index = state.news.findIndex(item => item.id === newsItemId);
      return {
        ...state,
        news: [
          ...state.news
          [index] = {
            ...state.news[index],
            comments: state.news[index].comments.concat({ id, author, commentText })
          }
        ]
      }
    default:
      return state;
  }
}

将感谢您的任何建议

Answer 1

扩展语法是解决此问题的一种方法，另一种方法是使用镜头，可以在Ramda之类的库中找到。

透镜使您可以“缩放”数据结构的特定部分并更新值，从而返回整个数据结构的新版本。

const R = require('ramda')
const a = {a:'foo', b:[1, 2, 3]}
const b = R.over(R.lensPath(['b']), nums => nums.concat(4), a)
console.log(b) //-> {a:'foo', b:[1, 2, 3, 4]}

使用变径镜可以表示为：

const R = require('ramda')
const newsReducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.ADD_COMMENT:
      const { id, author, commentText, newsItemId } = action.payload
      const i = state.news.findIndex(item => item.id === newsItemId)
      return R.over(
        R.lensPath(['news', i, 'comments']),
        comments => comments.concat({ id, author, commentText }),
        state
      )
      default:
        return state;
  }
}

如何以不变的方式更新数组

1 个答案: