1. 首頁 > 生活百科 > >

使用react+redux實現彈出框案例

生活百科

redux 實現彈出框案例【使用react+redux實現彈出框案例】實現效果，點擊顯示按鈕出現彈出框，點擊關閉按鈕隱藏彈出框

  1. 新建彈出框組件 src/components/Modal.js, 在index.js中引入app組件，在app中去顯示計數器和彈出框組件
function Modal ({ showState, show, hide }) {const styles = {width: 200,height: 200,position: 'absolute',top: '50%',left: '50%',marginTop: -100,marginLeft: -100,backgroundColor: 'skyblue',}return <div><button>顯示</button><button>隱藏</button><divstyle={styles}></div></div>}
  1. 彈出框組件顯示隱藏是一個狀態，所以我們存儲到store中，命名為show ， 因為需要出發action來修改store中的狀態所系我們需要創建modal.actions.js文件 ， 來存儲控制顯示隱藏的action ， 我們還是把顯示與隱藏aciton的type定義為常量方便導入使用
// src/store/const/modal.const.jsexport const SHOWMODAL = 'showModal'export const HIDEMODAL = 'hideModal'// src/store/actions/modal.actions.jsimport { SHOWMODAL, HIDEMODAL} from './../const/modal.const'export const show = () => ({type: SHOWMODAL})export const hide = () => ({type: HIDEMODAL})// src/store/reducers/counter.reducers.jsimport { INCREMENT, DECREMENT } from './../const/counter.const'import { SHOWMODAL, HIDEMODAL } from './../const/modal.const'const initialState = {count: 0,// 增加控制modal 顯示隱藏顯示的狀態，默認為隱藏狀態show: false}// eslint-disable-next-line import/no-anonymous-default-exportexport default (state = initialState, action) => {switch (action.type) {case INCREMENT:return {count: state.count + action.payload}case DECREMENT:return {count: state.count - action.payload}case SHOWMODAL:return {show: true}case HIDEMODAL:return {show: false}default:return state}}
  1. 彈框的顯示隱藏狀態用display屬性控制所以我們需要把狀態映射到props屬性中，因為show狀態與show顯示方法重名了，所以給show狀態起一個別名，利用 bindActionCreators 方法把 執行 dispatch 提交actions的方法映射到props中
import React from 'react'import { connect } from 'react-redux'import * as modalActions from './../store/actions/modal.actions'import { bindActionCreators } from 'redux'function Modal ({ showState, show, hide }) {const styles = {width: 200,height: 200,position: 'absolute',top: '50%',left: '50%',marginTop: -100,marginLeft: -100,backgroundColor: 'skyblue',// 增加控制顯示隱藏的css樣式display: showState ? 'block' : 'none'}return <div><button onClick={show}>顯示</button><button onClick={hide}>隱藏</button><divstyle={styles}></div></div>}// 映射顯示英藏狀態到props中const mapStateToProps = state => {return {showState: state.show}}// 把提交actions方法映射到組件props中const mapDispacthToProps = dispatch => bindActionCreators(modalActions, dispatch)export default connect(mapStateToProps,mapDispacthToProps)(Modal)通過上面我們發現在點擊顯示與隱藏之后計數器組件中的數字不見了，因為我們在執行顯示與隱藏的方法中并沒有返回 計數器的狀態所以這個狀態丟失掉了，我們需要在更改狀態的時候去補上原有的狀態
  1. 補上原有狀態
export default (state = initialState, action) => {switch (action.type) {case INCREMENT:return {...state,count: state.count + action.payload}case DECREMENT:return {...state,count: state.count - action.payload}case SHOWMODAL:return {...state,show: true}case HIDEMODAL:return {...state,show: false}default:return state}}這個時候我們的計數器與彈出框組件都已經正常了，但是我們發現reducer函數隨著actions動作越來越多變的越來越臃腫 ， 在狀態越來越多以后將會變得無法維護
拆分reducer 函數在計數器與彈出框案例中，在reducer函數中，我們既匹配到了計數器案例中的actions，又匹配到了彈出框案例中的actions 這樣reducer中的代碼將會越來越龐大，越來越臃腫，所以我們接下來拆分reducer，拆分reducer我們需要用到 combineReducers 方法，這個方法要求我們傳遞一個對象 這個對象是狀態對象 ， 返回值是合并后的reducer
  1. 創建 src/store/reducers/modal.reducers.js 文件，把彈出框的reducer抽離出來
import { SHOWMODAL, HIDEMODAL } from './../const/modal.const'const initialState = {show: false}// eslint-disable-next-line import/no-anonymous-default-exportexport default (state = initialState, action) => {switch (action.type) {case SHOWMODAL:return {...state,show: true}case HIDEMODAL:return {...state,show: false}default:return state}}
  1. 創建src/store/reducers/root.reducers.js 文件，用于合并計數器與彈出框的reducer
import { combineReducers } from 'redux'import CounterReducers from './counter.reducers'import ModalReducers from './modal.reducers'// 要求我們傳遞一個對象 這個對象是狀態對象// 這樣寫了之后 狀態的結構將是這樣 counter: { count: 0 } modaler: { show: false }export default combineReducers({counter: CounterReducers,modaler: ModalReducers})

推薦閱讀