使用react+redux实现弹出框案例

 更新时间:2022年08月25日 14:53:21   作者:开水泡饭@  
这篇文章主要为大家详细介绍了使用react+redux实现弹出框案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了用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
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 浅谈react-native热更新react-native-pushy集成遇到的问题

    浅谈react-native热更新react-native-pushy集成遇到的问题

    下面小编就为大家带来一篇浅谈react-native热更新react-native-pushy集成遇到的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 详解React之父子组件传递和其它一些要点

    详解React之父子组件传递和其它一些要点

    这篇文章主要介绍了详解React之父子组件传递和其它一些要点,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 简谈创建React Component的几种方式

    简谈创建React Component的几种方式

    这篇文章主要介绍了创建React Component的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • react实现antd线上主题动态切换功能

    react实现antd线上主题动态切换功能

    这篇文章主要介绍了react实现antd线上主题动态切换功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • React BootStrap用户体验框架快速上手

    React BootStrap用户体验框架快速上手

    这篇文章主要介绍了React BootStrap用户体验框架快速上手的相关知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-03-03
  • 使用React组件编写温度显示器

    使用React组件编写温度显示器

    这篇文章主要为大家详细介绍了使用React组件编写温度显示器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • React的特征单向数据流学习

    React的特征单向数据流学习

    这篇文章主要为大家介绍了React的特征单向数据流学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • React-Router(V6)的权限控制实现示例

    React-Router(V6)的权限控制实现示例

    本文主要介绍了React-Router(V6)的权限控制实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • React Native使用fetch实现图片上传的示例代码

    React Native使用fetch实现图片上传的示例代码

    本篇文章主要介绍了React Native使用fetch实现图片上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • React Router 中实现嵌套路由和动态路由的示例

    React Router 中实现嵌套路由和动态路由的示例

    React Router 是一个非常强大和灵活的路由库,它为 React 应用程序提供了丰富的导航和 URL 管理功能,能够帮助我们构建复杂的单页应用和多页应用,这篇文章主要介绍了React Router 中如何实现嵌套路由和动态路由,需要的朋友可以参考下
    2023-05-05

最新评论