Redux 更新狀態數組中的項

Question

當用戶單擊 edit 時，我試圖更新建築物的名稱和圖像。 我正在正確分派動作我認為我嘗試復制以前的state並用新值更新它的邏輯是錯誤的，因為我沒有看到值得到更新。 它只是返回以前的狀態。請幫幫我！

這是我的代碼：

import MyBuilding from '../../models/MyBuilding'
import { CREATE_BUILDING, DELETE_BUILDING , UPDATE_BUILDING} from '../actions/building'

const initialState = {
    building: [],
}
const BuildingReducer = (state=initialState, action) =>{
    switch(action.type){
        case CREATE_BUILDING:
            const newBuilding = new MyBuilding(
                action.buildingData.id,
                action.buildingData.name,
                action.buildingData.image, 
            )
            return { ...state, building: state.building.concat(newBuilding)}

        case DELETE_BUILDING:
            const filteredItems = state.building.filter(cb => cb.id !== action.deleteCB)
            return {...state, building: filteredItems }

        case UPDATE_BUILDING:
            const updatedItems = state.building.map(cb => cb.id === action.updateItem.id ? 
                {...cb, 
                    name: action.updateItem.name,
                    image: action.updateItem.image} : cb
                )
            return {...state, 
                building: updatedItems }
        default: 
            return state
    }
}
export default BuildingReducer

Answer 1

與 store 連接的組件基本上只與 Redux 狀態對話。 例子

let state = {
building: [1,2,3]
}

console.log({ ...state, building: state.building.concat([4,5,6])}) // you will see all building here 
console.log(state) // but the actual state has not changed 

將狀態分配給您想要的更改，然后返回該狀態

case CREATE_BUILDING:
const newBuilding = new MyBuilding(
    action.buildingData.id,
    action.buildingData.name,
    action.buildingData.image,
)
state = { ...state, building: state.building.concat(newBuilding) } // do this
return state