Behavior of Redux Reducer when Multiple Action is Called within A Component

I have recently learned the MERN stack and is currently making a side project using it. I am stumbling into a problem in which my Redux Reducer is overriding each other everytime a different action is called. Here is the complete and detailed problem.

Questions:

1. Behaviour of invoking actions on a React Component. Let's say that we have decided to create an action and implement it in one of our React Component, we have done all of the setup (e.g. creating reducer and updating the state, creating the action itself and connecting it to the react component using connect from react-redux). I was just wondering when I call multiple actions in our React Component from componentDidMount, why does the state override each other. E.g.

componentDidMount(){ // Action updates 'user: {}' state in our reducer this.props.fetchUserData(); // Action updates 'clients:{}' state this.props.fetchClientsData(); } 

Resulting State from Reducers:

user: {}, // Overrided by the fetchClientsData() clients { clientsData } 

Aren't we essentially update the specific reducer state (fetchUserData() updates 'user:{}' and fetchClientsData() updates 'clients: {}'). WHY IS IT OVERRIDING? I have checked my Redux Devtools middleware and It is infact overriding. HOW DO I NOT OVERRIDE THE OTHER STATE IN THE REDUCER? Thank you!

Update: - Here is my reducers: Index.js

import { combineReducers } from "redux"; import AuthReducer from "./AuthReducer"; import NotificationReducer from "./NotificationReducer"; import { reducer as formReducer } from "redux-form"; import DataReducer from "./DataReducer"; export default combineReducers({ form: formReducer, auth: AuthReducer, notification: NotificationReducer, data: DataReducer, }); 

AuthReducer.js

import { FETCH_USER, FETCH_HOSPITAL } from "../actionTypes"; export default (state = null, action) => { switch (action.type) { case FETCH_USER: return action.payload || false; case FETCH_HOSPITAL: return action.payload || false; default: return false; } }; 

DataReducer.js

import { FETCH_DATA } from "../actionTypes"; export default (state = {}, action) => { switch (action.type) { case FETCH_DATA: return { ...state, data: action.payload }; default: return state; } };