在使用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
对象。
答案 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;
}
};