reactjs - 如何从 reducer 返回一个数组？

Question

我有一系列项目。当项目更新时，我分派(dispatch)一个 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 中，将其更新到您使用操作负载设置 items 的位置。您之前在操作负载上使用了扩展运算符，它将所有数组索引转换为状态对象作为键。

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

如果您不想在 mapStateToProps 中使用嵌套状态，您可以在将初始状态设为数组的地方执行此操作。类似于此处显示的 todo reducer。 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
})