React Native - Redux ~ Props updating when not getting called

Question

I am experiencing an issue with React Native whilst using Redux.

I am using a Redux state to show/hide a modal from one component to the other. As this seems to be the best solution considering that it is cross component.

I have the modal opening and closing perfectly fine, and that works exactly how it show. However, when I click on this, it seems as though the props for the parent component are getting updated to the initial state again and I'm unsure as to why.

Parent Component:

const mapStateToProps = state => {
    return {
        modalVisible: state.modals.addRoomModalVisible
    }
};

const mapDispatchToProps = dispatch => {
    return {
        onMakeAddRoomModalActive: () => dispatch(makeAddRoomModalVisible())
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(RoomsScreen);

Child Component

const mapStateToProps = state => {
    return {
        rooms: state.rooms.rooms
    }
};

const mapDispatchToProps = dispatch => {
    return {
        onGetRooms: () => dispatch(getRooms())
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(RoomList);

Modals Reducer

import { HIDE_ADD_ROOM_MODAL, SHOW_ADD_ROOM_MODAL } from "../actions/actionTypes";

const initialState = {
    addRoomModalVisible: false
};

const modalsReducer = (state = initialState, action) => {
  switch (action.type) {
      case SHOW_ADD_ROOM_MODAL:
          return {
              ...state,
              addRoomModalVisible: true
          };
      case HIDE_ADD_ROOM_MODAL:
          return {
              ...state,
              addRoomModalVisible: false
          };
      default:
          return initialState;
  }
};

export default modalsReducer;

It seems the issue lies when I call the onMakeAddRoomModalActive prop. I have console logged out and the state is getting reset and the this.props.rooms is getting set to and empty array which is the initialState object which I have defined.

Answer 1

The issue lay within all of my reducers.

At the end of each reducer case statement I did a default which set the state to be the initialState which was defined at the top of the reducer.

I needed to change this to return state instead.

const modalsReducer = (state = initialState, action) => {
  switch (action.type) {
      case SHOW_ADD_ROOM_MODAL:
          return {
              ...state,
              addRoomModalVisible: true
          };
      case HIDE_ADD_ROOM_MODAL:
          return {
              ...state,
              addRoomModalVisible: false
          };
      default:
          return state;
  }

};