欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用react+redux實現(xiàn)彈出框案例

 更新時間:2022年08月25日 14:53:21   作者:開水泡飯@  
這篇文章主要為大家詳細介紹了使用react+redux實現(xiàn)彈出框案例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了用react+redux實現(xiàn)彈出框案例的具體代碼,供大家參考,具體內(nèi)容如下

redux 實現(xiàn)彈出框案例

1、實現(xiàn)效果,點擊顯示按鈕出現(xiàn)彈出框,點擊關閉按鈕隱藏彈出框

新建彈出框組件 src/components/Modal.js, 在index.js中引入app組件,在app中去顯示計數(shù)器和彈出框組件

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、彈出框組件顯示隱藏是一個狀態(tài),所以我們存儲到store中,命名為show,因為需要出發(fā)action來修改store中的狀態(tài)所系我們需要創(chuàng)建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 顯示隱藏顯示的狀態(tài),默認為隱藏狀態(tài)
? ? 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、彈框的顯示隱藏狀態(tài)用display屬性控制所以我們需要把狀態(tài)映射到props屬性中,因為show狀態(tài)與show顯示方法重名了,所以給show狀態(tài)起一個別名,利用 bindActionCreators 方法把 執(zhí)行 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>
}
// 映射顯示英藏狀態(tài)到props中
const mapStateToProps = state => {
? ? return {
? ? ? ? showState: state.show
? ? }
}
// 把提交actions方法映射到組件props中
const mapDispacthToProps = dispatch => bindActionCreators(modalActions, dispatch)
export default connect(mapStateToProps,mapDispacthToProps)(Modal)

通過上面我們發(fā)現(xiàn)在點擊顯示與隱藏之后計數(shù)器組件中的數(shù)字不見了,因為我們在執(zhí)行顯示與隱藏的方法中并沒有返回 計數(shù)器的狀態(tài)所以這個狀態(tài)丟失掉了,我們需要在更改狀態(tài)的時候去補上原有的狀態(tài)

4、補上原有狀態(tài)

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

這個時候我們的計數(shù)器與彈出框組件都已經(jīng)正常了,但是我們發(fā)現(xiàn)reducer函數(shù)隨著actions動作越來越多變的越來越臃腫,在狀態(tài)越來越多以后將會變得無法維護

拆分reducer 函數(shù)

在計數(shù)器與彈出框案例中,在reducer函數(shù)中,我們既匹配到了計數(shù)器案例中的actions,又匹配到了彈出框案例中的actions 這樣reducer中的代碼將會越來越龐大,越來越臃腫,所以我們接下來拆分reducer,拆分reducer我們需要用到 combineReducers 方法,這個方法要求我們傳遞一個對象 這個對象是狀態(tài)對象,返回值是合并后的reducer

1、創(chuàng)建 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、創(chuàng)建src/store/reducers/root.reducers.js 文件,用于合并計數(shù)器與彈出框的reducer

import { combineReducers } from 'redux'
import CounterReducers from './counter.reducers'
import ModalReducers from './modal.reducers'

// 要求我們傳遞一個對象 這個對象是狀態(tài)對象
// 這樣寫了之后 狀態(tài)的結(jié)構(gòu)將是這樣 counter: { count: 0 } modaler: { show: false }
export default combineReducers({
? ? counter: CounterReducers,
? ? modaler: ModalReducers
})

3、因為使用 combineReducers 合并reducer的時候改變了state的結(jié)構(gòu)所以我們需要在組件中去更改獲取state的方式

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

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 淺談react-native熱更新react-native-pushy集成遇到的問題

    淺談react-native熱更新react-native-pushy集成遇到的問題

    下面小編就為大家?guī)硪黄獪\談react-native熱更新react-native-pushy集成遇到的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • 詳解React之父子組件傳遞和其它一些要點

    詳解React之父子組件傳遞和其它一些要點

    這篇文章主要介紹了詳解React之父子組件傳遞和其它一些要點,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • 簡談創(chuàng)建React Component的幾種方式

    簡談創(chuàng)建React Component的幾種方式

    這篇文章主要介紹了創(chuàng)建React Component的幾種方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,,需要的朋友可以參考下
    2019-06-06
  • react實現(xiàn)antd線上主題動態(tài)切換功能

    react實現(xiàn)antd線上主題動態(tài)切換功能

    這篇文章主要介紹了react實現(xiàn)antd線上主題動態(tài)切換功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • React BootStrap用戶體驗框架快速上手

    React BootStrap用戶體驗框架快速上手

    這篇文章主要介紹了React BootStrap用戶體驗框架快速上手的相關知識,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-03-03
  • 使用React組件編寫溫度顯示器

    使用React組件編寫溫度顯示器

    這篇文章主要為大家詳細介紹了使用React組件編寫溫度顯示器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • React的特征單向數(shù)據(jù)流學習

    React的特征單向數(shù)據(jù)流學習

    這篇文章主要為大家介紹了React的特征單向數(shù)據(jù)流學習,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • React-Router(V6)的權限控制實現(xiàn)示例

    React-Router(V6)的權限控制實現(xiàn)示例

    本文主要介紹了React-Router(V6)的權限控制實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-05-05
  • React Native使用fetch實現(xiàn)圖片上傳的示例代碼

    React Native使用fetch實現(xiàn)圖片上傳的示例代碼

    本篇文章主要介紹了React Native使用fetch實現(xiàn)圖片上傳的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • React Router 中實現(xiàn)嵌套路由和動態(tài)路由的示例

    React Router 中實現(xiàn)嵌套路由和動態(tài)路由的示例

    React Router 是一個非常強大和靈活的路由庫,它為 React 應用程序提供了豐富的導航和 URL 管理功能,能夠幫助我們構(gòu)建復雜的單頁應用和多頁應用,這篇文章主要介紹了React Router 中如何實現(xiàn)嵌套路由和動態(tài)路由,需要的朋友可以參考下
    2023-05-05

最新評論