Redux state gets overwritten when calling 2 API using useEffect - reactjs

Question

I have 2 actions that calls different API. I dispatch these actions in a useEffect.
I have 2 reducers files, One for each, to store the data received from the API.
So, Basically I should be able to access both the data individually using useState.
But the secondly called API's data is overwriting the data of the first API. I don't understand how, because they are not even on the same file or even related.
Component
const items = useSelector((state) => state.lostchambers.items);
const lostChambersItems = useSelector((state) => state.sharklostdolsea.itemsLostChamber);
useEffect(() => {
dispatch(fetchingLostChambers());
dispatch(fetchSharkLostDolSea());
}, [dispatch]);
The Action for both the files looks like this I'm only posting here for one file as its the same code
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,
});
}
}
};
The Reducer for both the actions looks like this but I'm only posting here for one file as its the same code
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;
}
};
Combined Reducer
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,
});
Am I missing something here? I just can't figure out the issue ,I'v been trying four hours now.

Answer 1

The main issue I see here is that you are using the same type constant for both actions and reducers.
The way redux works is that it will pass the actions through all of the reducers that are combined together and will run whatever state changes the reducer says happens. That's why when you set up reducers you need the base case to return state if nothing matches.
By using the same type in the actions, both reducers will see both actions that were dispatched and perform the change. So a race condition occurs and the last one that is returned shows in both parts of state.
You should be able to fix this by just changing the action and reducer type constant for one/both of them.