Как лучше написать Reducer и Action в данной ситуации?

Question

[DarthJS]

Есть state, например cats, при добавлении нового cat я дергаю актион ADD_NEW_CAT.
Но, при обновлении обновлении приложения, либо инициализации делаю реквест на сервер и загружаю все данные, так исторически сложилось, что при реквесте приходит обьект массивов:

response: {
cats: [ , , ,],
dogs: [ , , ,],
hozyainy: [],
}

я делаю ACTION LOAD_DATA где вобвращаю эти данные.
В Reducer у меня ничего не остается как сохранить в state весь обьект.
Как можно разделить приходящие данные по разным state?
То есть, чтоб у меня были при LOAD_DATA три массива в state: {cats: [], dogs: [], hozyiny: [] }загруженные с сервера.
И при добавлении нового cat || dog они попадали в соответствующие state?

В данные момент ситуация такая:

state: {
loadedData: {cats: [], dogs: [], hozyiny: []},
cats: [],
dogs: [],
hozyiny: [],
}

CODE:
ACTIONS:

export const loadAllData = (response) => { 
return {
    type: 'LOAD_ALL_DATA',
    data: response,
}};

export const getAllData = () => async (dispatch, getState) => {

    const storedData = JSON.parse(localStorage.getItem('data'));
    if (storedData) {
        dispatch(loadAllData(storedData));
    } else {
    try {
        const response = await Api.getAllData();
        localStorage.setItem('data', JSON.stringify(response));
        dispatch(loadAllData(response));
    } catch (error) {
        console.error(error);
    }
    }
}

REDUCER:

export const loadedData = (state = [], action) => {
    switch (action.type) {
        case 'LOAD_ALL_DATA':
            return action.data;     // Как разбить данные в разные стейты?
        default:
        return state;
    }
}

Answer 1

[Dmitry Alekseev]

DarthJS, В любом случае у редьюсеров будут свои наименования в стейте. Если в action.data приходит объект такого вида { cats: [], dogs: [], ... }, то я бы так сделал.

const initialState = {
  cats: [],
  dogs: [],
  hozyiny: []
}

const reducer = (state = initialState, action) => {
  switch(action.type) {
    case LOAD_ALL_DATA: {
      const { cats, dogs, hozyiny } = action.data;
      return Object.assign({}, state, { cats, dogs, hozyiny })
    }
    default:
      return state
  }
}

Comments

[DarthJS]

но ведь когда я использую combineReducers, то как называется редусер, так стейте обьект называться и будет. То есть, в случае выше, который вы предложили будет у меня в приложении так:
state: {
reducer: { cats: [],
dogs: [],
hozyiny: []}
}

Верно?

[Dmitry Alekseev]

так будет в store.getState() и это нормально, в компонент Вы подключаете конкретные объекты, конкретных редьюсеров.

const mapStateToProps = (state) => {
  const { cats, dogs } = state.reducer;
  return {
    cats,
    dogs
  }
}

[DarthJS]

Dmitry Alekseev, понял, спасибо

Answer 2

[BugsCreator]

Если я правильно понял вопрос
В reducer:

case 'LOAD_ALL_DATA':
  return {
  ...state,
  cats: action.cats,
  dogs: action.dogs,
  hozyiny: action.hozyiny
  }

В action:

export const loadAllData = (response) => { 
  return {
    type: 'LOAD_ALL_DATA',
    cats: response.cats,
    dogs: response.dogs,
    hozyiny: response.hozyiny
  }};

Сам стор в редьюсере:

state: {
  cats: [],
  dogs: [],
  hozyiny: [],
}

Comments

[DarthJS]

и на выходе у меня получится такого вида стейт:
state: {
'НазваниеРедюсера': {
dogs: [],
cats: []
}
}
Верно? Как сделать, чтоб dogs && cats падали в корень?
Либо же я что-то изначально не так делаю?

[BugsCreator]

DarthJS, вы попробовали реализовать то, что я предложил? По идее должен получиться стейт редьюсера следующего вида:

state: {
  cats: [],
  dogs: [],
  hozyiny: [],
}

[DarthJS]

BugsCreator, да, ситуация такая, что я пихаю этот редюсер в combineReducers, и как я назову этот редюсер, такое название в корне стейта и будет. Пробовал впихнуть со спредом в combineReducers, но не работает :(