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
})

如何从减速器返回数组？

1 个答案: