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

Posted on by

本文實例為大傢分享瞭用react+redux實現彈出框案例的具體代碼，供大傢參考，具體內容如下

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>
        <div  style={styles}></div>
    </div>
}

2、彈出框組件顯示隱藏是一個狀態，所以我們存儲到store中，命名為show，因為需要出發action來修改store中的狀態所系我們需要創建modal.actions.js文件，來存儲控制顯示隱藏的action，我們還是把顯示與隱藏aciton的type定義為常量方便導入使用

// src/store/const/modal.const.js
export const SHOWMODAL = 'showModal'
export const HIDEMODAL = 'hideModal'

// src/store/actions/modal.actions.js
import { SHOWMODAL, HIDEMODAL} from './../const/modal.const'

export const show = () => ({type: SHOWMODAL})
export const hide = () => ({type: HIDEMODAL})

// src/store/reducers/counter.reducers.js
import { 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-export
export 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
    }
}

3、彈框的顯示隱藏狀態用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>
        <div  style={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)

通過上面我們發現在點擊顯示與隱藏之後計數器組件中的數字不見瞭，因為我們在執行顯示與隱藏的方法中並沒有返回 計數器的狀態所以這個狀態丟失掉瞭，我們需要在更改狀態的時候去補上原有的狀態

4、補上原有狀態

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-export
export default (state = initialState, action) => {
    switch (action.type) {

        case SHOWMODAL:
            return {
                ...state,
                show: true
            }
        case HIDEMODAL:
            return {
                ...state,
                show: false
            }

        default:
            return state
    }
}

2、創建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
})

3、因為使用 combineReducers 合並reducer的時候改變瞭state的結構所以我們需要在組件中去更改獲取state的方式

// src/components/Count.js
const mapStateProps = ({ counter }) => ({
    count: counter.count,
    a: '1'
})
// src/components/Modal.js
const mapStateToProps = ({ modaler }) => {
    return {
        showState: modaler.show
    }
}

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：