The examples in this article share with you the specific code of using react+redux to implement pop-up box cases for your reference. The specific content is as follows
redux implementation pop-up box case
1. To achieve the effect, click the display button to appear, click the close button to hide the pop-up box
Create a new pop-up box component src/components/, introduce the app component, and display the counter and pop-up box components in the 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>show</button>
<button>hide</button>
<div style={styles}></div>
</div>
}2. The pop-up component shows hidden is a state, so we store it in the store and named it show. Because we need to start an action to modify the status in the store, we need to create a file to store and control the hidden action of display. We still define the type of display and hidden aciton as constants for easy import and use.
// src/store/const/
export const SHOWMODAL = 'showModal'
export const HIDEMODAL = 'hideModal'
// src/store/actions/
import { SHOWMODAL, HIDEMODAL} from './../const/'
export const show = () => ({type: SHOWMODAL})
export const hide = () => ({type: HIDEMODAL})
// src/store/reducers/
import { INCREMENT, DECREMENT } from './../const/'
import { SHOWMODAL, HIDEMODAL } from './../const/'
const initialState = {
count: 0,
// Add control to modal to display hidden status, default to hidden status show: false
}
// eslint-disable-next-line import/no-anonymous-default-export
export default (state = initialState, action) => {
switch () {
case INCREMENT:
return {
count: +
}
case DECREMENT:
return {
count: -
}
case SHOWMODAL:
return {
show: true
}
case HIDEMODAL:
return {
show: false
}
default:
return state
}
}3. The display hidden state of the pop-up box is controlled by the display attribute, so we need to map the state to the props attribute. Because the show state is duplicated with the show display method, we give the show state an alias and use the bindActionCreators method to map the method of executing dispatch and submitting actions to the props.
import React from 'react'
import { connect } from 'react-redux'
import * as modalActions from './../store/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',
// Add control display hidden css style display: showState ? 'block' : 'none'
}
return <div>
<button onClick={show}>show</button>
<button onClick={hide}>hide</button>
<div style={styles}></div>
</div>
}
// Map displays the English-* status into propsconst mapStateToProps = state => {
return {
showState:
}
}
// Map the commit actions method into component propsconst mapDispacthToProps = dispatch => bindActionCreators(modalActions, dispatch)
export default connect(mapStateToProps,mapDispacthToProps)(Modal)Through the above we found that after clicking on display and hide the numbers in the counter component disappeared, because we did not return the counter state in the method of display and hide, so this state is lost. We need to fill in the original state when changing the state
4. Make up for the original state
export default (state = initialState, action) => {
switch () {
case INCREMENT:
return {
...state,
count: +
}
case DECREMENT:
return {
...state,
count: -
}
case SHOWMODAL:
return {
...state,
show: true
}
case HIDEMODAL:
return {
...state,
show: false
}
default:
return state
}
}At this time, our counter and pop-up box components are already normal, but we found that the reducer function becomes more and more bloated as the actions become more and more active, and will become unmaintainable after the state becomes more and more frequent.
Split reducer function
In the counter and pop-up case, in the reducer function, we match both the actions in the counter case and the actions in the pop-up case. In this way, the code in the reducer will become larger and more bloated. So we will split the reducer and split the reducer. We need to use the combineReducers method. This method requires us to pass an object. This object is a state object and the return value is the merged reducer.
1. Create a src/store/reducers/ file and extract the pop-up reducer
import { SHOWMODAL, HIDEMODAL } from './../const/'
const initialState = {
show: false
}
// eslint-disable-next-line import/no-anonymous-default-export
export default (state = initialState, action) => {
switch () {
case SHOWMODAL:
return {
...state,
show: true
}
case HIDEMODAL:
return {
...state,
show: false
}
default:
return state
}
}2. Create a src/store/reducers/ file to merge counters and pop-up boxes reducers
import { combineReducers } from 'redux'
import CounterReducers from './'
import ModalReducers from './'
// We are required to pass an object. This object is a state object// After writing this, the structure of the state will be like this counter: { count: 0 } modaler: { show: false }export default combineReducers({
counter: CounterReducers,
modaler: ModalReducers
})3. Because the structure of the state is changed when combining combineReducers is used to merge reducers, we need to change the way to obtain the state in the component.
// src/components/
const mapStateProps = ({ counter }) => ({
count: ,
a: '1'
})
// src/components/
const mapStateToProps = ({ modaler }) => {
return {
showState:
}
}The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.