Redux + React 如何在充满对象的数组中仅更改一个元素值？我有可用的应用程序，只是想确保我做对了

编程问答 2022-05-16

问题描述

再一次：我在 redux 商店中有项目 -> 包含对象 {id: str,val: bool} 的数组

我想通过 id 更改 obj 值，我是这样做的，它有效，但我认为我过于复杂了：

export const setItems = items => {
   return {
       type: SET_DATA,payload: items
   }
}

export const changeItem = id => {
    return (dispatch,getState) => {
        let cpItems = getState().items.items.map( el => // creating copy
            id === el._id ? {...el,val: !el.val} : el
        )
        dispatch(setItems(cpItems)) //sending copy
    }
}

和减速器：

const itemsReducer = (state = initialState,action) => {
    switch (action.type){
        case SET_DATA:
            return {
                ...state,items: action.payload
            }
        default: return state
    }
}

这是在 redux 中是如何完成的吗？

解决方法

逻辑很好，你可以创建包含逻辑的动作。

但是，我不会将 thunk 用于同步操作。我会将逻辑移到 reducer，并为 changeItem 创建一个特定的操作类型：

export const changeItem = id => ({
   type: CHANGE_ITEM,payload: id
})

const itemsReducer = (state = initialState,action) => {
  switch (action.type) {
    case SET_DATA:
      return {
        ...state,items: action.payload
      }
    case CHANGE_ITEM:
      return {
        ...state,items: state.items.map(el => // creating copy
          id === el._id ? {...el,val: !el.val} : el
        )
      }
    default:
      return state
  }
}
reactjsreactjsreduxreduxredux