使用react+redux實(shí)現(xiàn)彈出框案例
本文實(shí)例為大家分享了用react+redux實(shí)現(xiàn)彈出框案例的具體代碼,供大家參考,具體內(nèi)容如下
redux 實(shí)現(xiàn)彈出框案例
1、實(shí)現(xiàn)效果,點(diǎn)擊顯示按鈕出現(xiàn)彈出框,點(diǎn)擊關(guān)閉按鈕隱藏彈出框
新建彈出框組件 src/components/Modal.js, 在index.js中引入app組件,在app中去顯示計(jì)數(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、彈出框組件顯示隱藏是一個(gè)狀態(tài),所以我們存儲(chǔ)到store中,命名為show,因?yàn)樾枰霭l(fā)action來修改store中的狀態(tài)所系我們需要?jiǎng)?chuàng)建modal.actions.js文件,來存儲(chǔ)控制顯示隱藏的action,我們還是把顯示與隱藏aciton的type定義為常量方便導(dǎo)入使用
// 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),默認(rèn)為隱藏狀態(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屬性中,因?yàn)閟how狀態(tài)與show顯示方法重名了,所以給show狀態(tài)起一個(gè)別名,利用 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)在點(diǎn)擊顯示與隱藏之后計(jì)數(shù)器組件中的數(shù)字不見了,因?yàn)槲覀冊趫?zhí)行顯示與隱藏的方法中并沒有返回 計(jì)數(shù)器的狀態(tài)所以這個(gè)狀態(tài)丟失掉了,我們需要在更改狀態(tài)的時(shí)候去補(bǔ)上原有的狀態(tài)
4、補(bǔ)上原有狀態(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 ? ? } }
這個(gè)時(shí)候我們的計(jì)數(shù)器與彈出框組件都已經(jīng)正常了,但是我們發(fā)現(xiàn)reducer函數(shù)隨著actions動(dòng)作越來越多變的越來越臃腫,在狀態(tài)越來越多以后將會(huì)變得無法維護(hù)
拆分reducer 函數(shù)
在計(jì)數(shù)器與彈出框案例中,在reducer函數(shù)中,我們既匹配到了計(jì)數(shù)器案例中的actions,又匹配到了彈出框案例中的actions 這樣reducer中的代碼將會(huì)越來越龐大,越來越臃腫,所以我們接下來拆分reducer,拆分reducer我們需要用到 combineReducers 方法,這個(gè)方法要求我們傳遞一個(gè)對象 這個(gè)對象是狀態(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 文件,用于合并計(jì)數(shù)器與彈出框的reducer
import { combineReducers } from 'redux' import CounterReducers from './counter.reducers' import ModalReducers from './modal.reducers' // 要求我們傳遞一個(gè)對象 這個(gè)對象是狀態(tài)對象 // 這樣寫了之后 狀態(tài)的結(jié)構(gòu)將是這樣 counter: { count: 0 } modaler: { show: false } export default combineReducers({ ? ? counter: CounterReducers, ? ? modaler: ModalReducers })
3、因?yàn)槭褂?combineReducers 合并reducer的時(shí)候改變了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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
淺談react-native熱更新react-native-pushy集成遇到的問題
下面小編就為大家?guī)硪黄獪\談react-native熱更新react-native-pushy集成遇到的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09簡談創(chuàng)建React Component的幾種方式
這篇文章主要介紹了創(chuàng)建React Component的幾種方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06react實(shí)現(xiàn)antd線上主題動(dòng)態(tài)切換功能
這篇文章主要介紹了react實(shí)現(xiàn)antd線上主題動(dòng)態(tài)切換功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08React BootStrap用戶體驗(yàn)框架快速上手
這篇文章主要介紹了React BootStrap用戶體驗(yàn)框架快速上手的相關(guān)知識,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-03-03React的特征單向數(shù)據(jù)流學(xué)習(xí)
這篇文章主要為大家介紹了React的特征單向數(shù)據(jù)流學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09React-Router(V6)的權(quán)限控制實(shí)現(xiàn)示例
本文主要介紹了React-Router(V6)的權(quán)限控制實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05React Native使用fetch實(shí)現(xiàn)圖片上傳的示例代碼
本篇文章主要介紹了React Native使用fetch實(shí)現(xiàn)圖片上傳的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03React Router 中實(shí)現(xiàn)嵌套路由和動(dòng)態(tài)路由的示例
React Router 是一個(gè)非常強(qiáng)大和靈活的路由庫,它為 React 應(yīng)用程序提供了豐富的導(dǎo)航和 URL 管理功能,能夠幫助我們構(gòu)建復(fù)雜的單頁應(yīng)用和多頁應(yīng)用,這篇文章主要介紹了React Router 中如何實(shí)現(xiàn)嵌套路由和動(dòng)態(tài)路由,需要的朋友可以參考下2023-05-05