如何从减速器返回数组？

Question

我有一系列的项目.当项目更新时,我发送一个UPDATED_LIST动作并传递带有更新数据的项目.

例如:

const initialState = {
    items: []
}

const reducer = items(state = initialState, action) {
    switch(action.type) {
        case 'UPDATED_ITEMS':
            return { ...state, ...action.payload }
        default:
            return state
    }
}

我这样派遣:

store.dispatch({
    type: 'UPDATED_ITEMS',
    payload: [ { name: "bob"}, { name: "harry" } ]
})

而且mapStateToProps:

const mapStateToProps = state => ({ items: state.items })

我的问题是当我尝试items从组件内访问时,它是一个对象而不是一个数组.我必须执行以下操作才能访问该数组:

const mapStateToProps = state => ({ 
    items: Object.keys(state.offers).map((k) => state.items[k])
})

是否可以将项目作为数组而不必转换它们？

Answer 1

在reducer中,将其更新到使用操作有效内容设置项目的位置.您之前在动作有效负载上使用了spread运算符,它将所有数组索引转换为状态对象作为键.

const reducer = items(state = initialState, action) {
    switch(action.type) {
        case 'UPDATED_ITEMS':
            return { ...state, items: [...action.payload] }
        default:
            return state
    }
}

如果您不想在您的嵌套状态中mapStateToProps执行此操作,则可以将初始状态设置为数组.类似于此处显示的todo减速器.https://redux.js.org/basics/example-todo-list#reducerstodos.js

const initialState = [];

const reducer = items(state = initialState, action) {
    switch(action.type) {
        case 'UPDATED_ITEMS':
            return [ ...action.payload ];
        default:
            return state
    }
}

const mapStateToProps = state => ({ 
  items: state.items
})