使用react+redux实现弹出框案例
redux实现弹出框case实现效果，点击显示按钮显示弹出框，点击关闭按钮隐藏弹出框，新建弹出框组件src/components/Modal.js，在index.js中引入app组件，在appBox组件中显示计数器和弹窗functionModal({showState,show,hide}){conststyles={width:200,height:200,position:'absolute',top:'50%',left:'50%',marginTop:-100,marginLeft:-100,backgroundColor:'skyblue',}return
}弹出框组件的显示和隐藏是一个状态，所以我们将其存储在store中，并命名为show，因为我们需要启动一个动作来修改商店中的状态。我们需要创建一个modal.actions.js文件来存放控制显示和隐藏的action。我们仍然将显示和隐藏aciton的类型定义为常量，以便于导入和使用//src/store/const/modal.const.jsexportconstSHOWMODAL='showModal'exportconstHIDEMODAL='hideModal'//src/store/actions/modal.actions.jsimport{SHOWMODAL,HIDEMODAL}来自'./../const/modal.const'exportconstshow=()=>({type:SHOWMODAL})exportconsthide=()=>({类型：隐藏EMODAL})//src/store/reducers/counter.reducers.jsimport{INCREMENT,DECREMENT}from'./../const/counter.const'import{SHOWMODAL,HIDEMODAL}from'./../const/modal.const'constinitialState={count:0,//增加控件模态显示隐藏状态，默认为隐藏状态show:false}//eslint-disable-next-lineimport/no-anonymous-default-exportexportdefault(state=initialState,action)=>{switch(action.type){caseINCREMENT:return{count:state.count+action.payload}caseDECREMENT:return{count:state.count-action.payload}caseSHOWMODAL:return{show:true}caseHIDEMODAL:return{show:false}default:returnstate}}弹框的显示和隐藏状态由display属性控制，所以我们需要将state映射到props属性，因为showstate与show显示方法同名所以，给showstate起个别名，使用bindActionCreators方法映射执行dispatch和提交actions的方法t道具ImportReactfrom'react'import{connect}from'react-redux'import*asmodalActionsfrom'./../store/actions/modal.actions'import{bindActionCreators}from'redux'functionModal({showState,show,hide}){conststyles={width:200,height:200,position:'absolute',top:'50%',left:'50%',marginTop:-100,marginLeft:-100,backgroundColor:'skyblue',//增加控件显示隐藏的css样式display:showState?'block':'none'}return
}//将影藏状态映射到propsconstmapStateToProps=state=>{return{showState:state.show}}//将提交的actions方法映射到组件propsconstmapDispacthToProps=dispatch=>bindActionCreators(modalActions，dispatch）导出默认连接（mapStateToProps，mapDispacthToProps)(Modal)通过上面我们发现点击Show和Hide后counter组件中的数字消失了，因为我们在执行显示和隐藏的方法中没有返回counter的状态，所以这个状态就丢失了，我们需要改变它的状态，补上原来的状态，补上原来的状态exportdefault(state=initialState,action)=>{switch(action.type){caseINCREMENT:return{...state,count:state.count+动作。payload}caseDECREMENT:return{...state,count:state.count-action.payload}caseSHOWMODAL:return{...state,show:true}案例HIDEMODAL:return{...state,show:false}default:returnstate}}这时候我们的计数器和弹出框组件已经正常了，但是我们发现reducer函数随着action越来越多变得越来越臃肿，当state在越来越多的计数器和弹出框的情况下，在reducer函数中，我们不仅要匹配计数器情况下的动作，还要匹配弹出框情况下的动作，所以代码中reducer会越来越大，越来越臃肿，所以接下来我们要拆分reducer，我们需要使用combineReducers方法来拆分reducer，这个方法需要我们传递一个对象这个对象是一个state对象，返回值是合并的reducer创建src/store/reducers/modal.reducers.js文件，提取弹框的reducerimport{SHOWMODAL,HIDEMODAL}from'./../const/modal.const'constinitialState={show:false}//eslint-disable-next-lineimport/no-anonymous-default-exportexportdefault(state=initialState,action)=>{switch(action.type){caseSHOWMODAL:return{...state,show:true}caseHIDEMODAL:return{...state,show:false}default:returnstate}}创建src/store/reducers/root.reducers.js文件对于合并计数器Reducerimport{combineReducers}from'redux'importCounterReducersfrom'./counter.reducers'importModalReducersfrom'./modal.reducers'//要求我们传递一个对象。Thisobjectisastateobject//这样写之后state的结构会像这样})因为使用combineReducers组合reducer时改变了state的结构，所以我们需要改变在组件中获取state的方式//src/components/Count.jsconstmapStateProps=({counter})=>({count:counter.count,a:'1'})//src/components/Modal.jsconstmapStateToProps=({modaler})=>{return{showState:modaler.show}}
