Состояние Redux перезаписывается при вызове 2 API с помощью useEffect

Question

У меня есть 2 действия, которые вызывают разные API. Я отправляю эти действия в useEffect.
У меня есть 2 файла редукторов, по одному для каждого, для хранения данных, полученных от API.
Итак, в принципе, я должен иметь возможность доступа к обоим данным по отдельности, используя useState.
Но данные второго уровня API перезаписывают данные первого API. Я не понимаю, как, потому что они даже не находятся в одном файле или даже связаны.

Компонент

    const items = useSelector((state) => state.lostchambers.items);
    const lostChambersItems = useSelector((state) => state.sharklostdolsea.itemsLostChamber);

  useEffect(() => {
        dispatch(fetchingLostChambers());
        dispatch(fetchSharkLostDolSea());
    }, [dispatch]);

Действие для обоих файлы выглядят так: я публикую здесь только один файл с тем же кодом

import { FETCH_POSTS } from "./type";
import axios from "../../utils/Request";

export const fetchingLostChambers = () => async (dispatch) => {
    const response = await axios.get("API");
    const { data = false, status } = response;
    if (status === 200) {
        if (data) {
            dispatch({
                type: FETCH_POSTS,
                items: data.acf,
            });
        }
    }
};

Редуктор для обоих действий выглядит следующим образом, но я пишу здесь только для один файл с тем же кодом

import { FETCH_POSTS } from "../actions/lostchambers/type";

const initialState = {
    items: [],
};

export default (state = initialState, action) => {
    switch (action.type) {
        case FETCH_POSTS:
            return {
                ...state,
                ...action,
            };
        default:
            return state;
    }
};

Комбинированный редуктор

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducers from "./reducers";

const initialState = {};

const middleware = [thunk];

const store = createStore(rootReducers, initialState, applyMiddleware(...middleware));

export default store;

RootReducer

import { combineReducers } from "redux";
import venues from "./venues";
import lostchambers from "./lostchambers";
import sharklostdolsea from "./sharklostdolsea";

export default combineReducers({
    venues,
    lostchambers,
    sharklostdolsea,
});

Я что-то здесь упускаю? Я просто не могу понять проблему, я пытался четыре часа.

Answer 1

Основная проблема, которую я вижу здесь, заключается в том, что вы используете одинаковую константу типа для действий и редукторов.

Способ, которым работает Redux, заключается в том, что он пропускает действия через все редукторы, которые объединены вместе. и будет запускать любые изменения состояния, которые, как говорит редуктор. Вот почему, когда вы устанавливаете редукторы, вам нужно, чтобы базовый случай возвращал состояние, если ничего не совпадает.

Используя один и тот же тип в действиях, оба редуктора увидят оба отправленных действия и выполнят изменение. Таким образом, возникает состояние гонки, и последнее возвращаемое состояние отображается в обеих частях состояния.

Вы можете исправить это, просто изменив действие и константу типа редуктора для одного или обоих из них.