Problem: Action is dispatching and it's checked by reducer action.type. but after checking the reducer not updating the state. reducer returning default state.

Action is dispatching from [id].js

    const RoomDetailsPage = () => {
      const router = useRouter();
      const { id } = router.query;
     
      return <div>
          <RoomDetails/>
      </div>;
    };
    
    export const getServerSideProps= wrapper.getServerSideProps(
        (store)=>(
            async ({ req, res, query })=>{
                store.dispatch(getRoomDetails(query?.id))
            }
        )
    )
    
    export default RoomDetails;

roomAction.js

export const getRoomDetails = (id) => async (dispatch) => {
  try {
    const { data } = await getRoomDetailsApi(id);

    dispatch({
      type: ROOM_DETAILS_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: ROOM_DETAILS_FAIL,
      payload: error?.response?.data?.message,
    });
  }
};

roomReducer.js type case is matching in switch block, also payload coming with action. but reducer not updating the state.

export const roomDetailsReducer = (state = { room: null, error:null}, action) => {
  switch (action.type) {
    case ROOM_DETAILS_SUCCESS:
      return {room:{hi:'hello'}};

    case ROOM_DETAILS_FAIL:
      return {error: action.payload};

    case CLEAR_ERRORS:
      return {error: null};


    default:
      return state;
  }
};

combineReducers code in reducer.js

import { combineReducers } from "redux";
import { allRoomsReducers, roomDetailsReducer } from "./roomReducers";

const reducers = combineReducers({
   allRooms: allRoomsReducers,
   roomDetails: roomDetailsReducer,
})
export default reducers

Note: allRoomsReducers code working fine.