微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

再一次:我在 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
  }
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。