How to write a function in reducer in React-Redux - reactjs

Question

I am working on a React project, In that I have to perform Increment operation and I am writing
That's logic in a store, but I don't now how to stop it's Increment after 6.
So someone please help me how to write logic to stop Incrementing after 6, its initial value
Is 1. When I am clicking the plus icon it has to Increment but it has to stop Incrementing
after number 6. For this project I am using React-Redux.
This is Buttontypes.js
export const additionVariable = 'ADDITION'
This is Buttonactions.js
import { additionVariable } from './Buttontypes';
export const addition = () => {
return {
type: additionVariable
}
}
This is Buttonreducer.js
import { additionVariable } from './Buttontypes';
const initialState = {
value: 1
}
const additionReducer = (state = initialState, action) => {
switch(action.type) {
case additionVariable: return {
...state,
value: state.value + 1
}
default: return state
}
}
export default additionReducer
This is store.js
import { createStore } from 'redux';
import mainReducer from './Button/Buttonreducer';
const store = createStore(mainReducer);
export default store
This is App.js
import React from 'react';
import './App.css';
import { connect } from 'react-redux';
import { addition } from './Redux/Button/Buttonactions';
function App(props) {
return (
<div className="container">
<div className='row'>
<div className='adultbox pr-2'>
<div className='onebox'>
<span className='adultminus'>-</span>
</div>
<div className='twobox'>
<span className='adultvalue'>{props.value}</span>
</div>
<div className='threebox'>
<span onClick={props.Fun} className='adultplus'>+</span>
</div>
</div>
</div>
</div>
);
}
const mapStateToProps = state => {
return {
value: state.value
}
}
const mapDispatchToProps = dispatch => {
return {
Fun: () => dispatch(addition())
}
}
export default connect(mapStateToProps,mapDispatchToProps)(App)

Answer 1

try this for your reducer :
import { additionVariable } from './Buttontypes';
const initialState = {
value: 1
}
const additionReducer = (state = initialState, action) => {
switch(action.type) {
case additionVariable: return {
...state,
value: state.value <= 6 ? state.value + 1 : state.value
}
default: return state
}
}
export default additionReducer

Answer 2

In addition to what already suggested about the reducer, I would advice you to add a check in mapDispatchToProps and (optional) disable the + if the value is equal to 6:
const mapDispatchToProps = dispatch => {
return {
Fun: (value) => {
if (value < 6 {
dispatch(addition())
}
}
}
}
Then, in App.js:
<div className='threebox'>
<span onClick={() => props.Fun(props.value)} className='adultplus'>+</span>
</div>