Javascript 如何在Redux中保持可切换状态的数据

在我的reducer中有一个

TOGGLE\u SAVED

操作，我想在目标“image”对象（在

loadedImages

数组中）上切换

SAVED

属性，并将该对象以状态存储在

savedImages

数组中

我只希望当前

loadedImages

数组中的一个图像对象已

保存

为真，因为我希望

loadedImages

在一些GET请求时重新填充，同时保留

savedImages中最后一个请求保存的图像

现在，我的代码如下所示：

const initialState = {
    loadedImages: [],
    savedImages: [],
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case LOAD_IMAGES:
            return {
                ...state, 
                loadedImages: action.payload, // payload returns a fetch(...)[]
            }
        case TOGGLE_SAVED:
            return {
                ...state,
                loadedImages: state.loadedImages.map(img => {
                    if (img.id === action.payload.id) {

                        return {...img, saved: !img.saved}

                    } else {
                        return {...img, saved: false}
                    }

                }),

                savedImages: [
                    ...state.loadedImages.filter(img => img.saved)
                ]
            } 

        default: 
            return state
    }
}

目前，

savedImages

仅在运行两次

TOGGLE\u SAVED

时才会填充，并且

savedImages

中的项目不会在每次重新填充

loadedImages

时持续存在（通过GET请求）

注意：典型的“映像”对象在有效负载中返回为：

---

{id:0，saved:Boolean}

我相信您当前的reducer中，

savedImages

属性实际上使用了前面对

loadedImages

的引用

这就是为什么它只在第二次运行时起作用。您假设初始的

LoadeImage

map（）

运行并完成，然后移动到下一个道具，但情况并非如此

能起作用的是这样的：

case TOGGLE_SAVED:

            const loadedImages = state.loadedImages.map(img => {
                if (img.id === action.payload.id) {
                    return {...img, saved: !img.saved}
                } else {
                    return {...img, saved: false}
            })

            return {
                ...state,
                loadedImages,

                savedImages: [
                    ...loadedImages.filter(img => img.saved)
                ]
            }