React: как обновить состояние свойство типа массива объектов

Question

У меня есть следующие состояния - история действий:

Моя проблема заключается в том, что я ожидаю, состояние с zoneCategories: Array [8757], так что я м делает что-то неправильно в моем редукторе, который:

let setZoneCategoriesReducer = function (zoneCategories = [], action) { 
    switch (action.type) { 
     case 'SET_CATEGORIES_FROM_SERVER': 
      return [ 
       ...zoneCategories, action.zoneCategories 
      ] 
     default: 
      return zoneCategories; 
    } 
} 

export default setZoneCategoriesReducer 

Вот мой магазин:

import {applyMiddleware, compose, createStore} from 'redux' 
import rootReducer from './reducers' 
import logger from 'redux-logger' 
import thunk from 'redux-thunk' 

let finalCreateStore = compose(
    applyMiddleware(thunk, logger()) 
)(createStore) 

export default function configureStore(initialState = {zoneCategories: []}) { 
    return finalCreateStore(rootReducer, initialState) 
} 

А вот мой App EntryPoint:

import React from 'react'; 
import App from './App'; 
import './index.css'; 
import { Provider } from 'react-redux'; 
import configureStore from './redux/store' 
import { render } from 'react-dom' 

let initialState = { 
    zoneCategories: [] 
} 

let store = configureStore(initialState) 

render(
    <Provider store={store}> 
     <App /> 
    </Provider>, 
    document.getElementById('root') 
) 

Кроме того, мой корень редуктор:

import { combineReducers } from 'redux' 
import setZoneCategoriesReducer from './setZoneCategoriesReducer' 

const rootReducer = combineReducers({ 
    zoneCategories: setZoneCategoriesReducer 
}) 

export default rootReducer 

Я мысленно заблокирован прямо сейчас, любая помощь?

Answer 1

В вашей функции setZoneCategoriesReducer вы добавляете action.zoneCategories в качестве элемента возвращаемого состояния, которое предположительно содержит элементы 8757, которые вам действительно нужны. Разложите его вместо прямого добавления.

let setZoneCategoriesReducer = function (zoneCategories = [], action) { 
// ... 
     return [ 
      ...zoneCategories, ...action.zoneCategories 
     ] 
// ... 
} 

}