Javascript React Redux对象自动对数组排序

我的Redux reducer从api接收帖子，我将它们作为对象存储在存储库中，以通过它们的

id

存储帖子

reducer.js

问题是我得到的帖子是从最高id到最低id排序的，但是当分配到状态时，它们会从最低id到最高id排序，这会导致最早的帖子出现在第一个，最后出现最新的帖子

我知道如果我将它们存储在一个数组中，问题就会解决，但我需要通过它们的id来简化突变。那么我如何克服这个问题呢

附言：我试过这样的东西，但没有用=>

export function postsByIndex(state=[], action){
    enableES5()
    return(
        produce(state, draft => {
            switch(action.type){
                case GET_POSTS:
                    draft = posts(state.posts, action)
                default:
                    return draft
            }
        })
    ) 
}

---

对象的迭代顺序通常是插入顺序。但是，对于类似数字的键，它是数字。因为您的帖子ID是数字的，所以这将成为迭代顺序（即从低到高）

您可以改为创建一个保证插入顺序的

在初始化映射时，您将执行

items:newmap（）

，而不是

items:{}

。添加项目时，需要执行

items.set（post.id，post）

。您仍然可以直接访问它们（

items.get（3）

），也可以按插入顺序遍历它们（

items.forEach（item=>{…}）

）

编辑

根据下面的评论，不建议将地图存储在redux存储中。评论中分享的链接说，如果你不关心持久性和时间旅行调试，那就好了，但这是一个公平的观点。考虑到这一点，一个更自然的解决方案是将结果存储为数组（OP表示他们不想这样做）

下面共享的负数索引操作很聪明，但有点粗糙。你也可以让索引不是数字，比如

draft.posts[`post-${post.id}`]

---

另一种选择是允许它们按原样进行排序，但当访问它们时，会按相反的顺序进行。

由于最佳解决方案是上述解决方案，我发现这个问题有点小技巧：

如

tmdesigned

所述，类似数字的键从最低到最高排序，我们可以将

-

添加到数字的前面，这样迭代顺序就会颠倒

export function posts(state = initialState, action){
    enableES5()
    return(        
        produce(state, draft => {
            const postId = -(action.postId)            
            switch (action.type) {
                case GET_POSTS:
                    action.payload.map(post => {
                        draft.posts[-post.id] = post
                    })
                    break
                default:
                    return draft
            }
        }))
    }

---

您的解决方案可以破坏redux开发工具并持久化，可能还有许多其他中间件或redux扩展。我建议将帖子按日期排序（我假设帖子有creaton数据）或在选择器中按id反向排序，而不是在redux存储中存储Map对象。

export function posts(state = initialState, action){
    enableES5()
    return(        
        produce(state, draft => {
            const postId = -(action.postId)            
            switch (action.type) {
                case GET_POSTS:
                    action.payload.map(post => {
                        draft.posts[-post.id] = post
                    })
                    break
                default:
                    return draft
            }
        }))
    }