React Native-Redux〜不调用时更新道具

时间:2018-12-10 18:47:47

标签: javascript reactjs react-native redux

在使用Redux时,我遇到了React Native的问题。

我正在使用Redux状态来显示/隐藏从一个组件到另一个组件的模态。考虑到它是交叉组件,这似乎是最好的解决方案。

我的模式打开和关闭非常完美,并且显示效果完全一样。但是,当我单击此按钮时,似乎父组件的道具再次被更新为初始状态,我不确定原因。

父组件:

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

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

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

子组件

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

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

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

模件减速器

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;

看来问题出在我调用onMakeAddRoomModalActive道具时。我已退出控制台,状态正在重置,this.props.rooms设置为空数组,这是我定义的initialState对象。

1 个答案:

答案 0 :(得分:0)

问题出在我所有的减速器中。

在每个reducer case语句的末尾,我做了一个默认操作,将状态设置为initialState,该状态在reducer的顶部定义。

我需要更改它以返回state

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;
  }

};