React-Redux How to improve code in Reducers file - reactjs

Question

I am currently working on an upvote/downvote feature and have shown state changes of how it on my reducers. I feel like the code in 'case types.ADD_VOTE' in my reducers file could be refactored to be cleaner.
I also included the container file as well to better understand what I am trying to achieve in the app.
Reducers
import * as types from '../constants/actionTypes.js';
/*
#giftList: List of objects
#lastGiftId:
*/
const initialState = {
giftList: [],
lastGiftId: 10000,
totalVotes: 0,
alreadyVoted: false,
newMessage: ''
};
const giftReducer = (state=initialState, action) => {
// let giftList;
// let setMessage;
switch(action.type) {
case types.ADD_GIFT:
let stateCopy = {...state};
stateCopy.lastMarketId += 1;
// create the new gift object structure.
const giftStructure = {
// lastGiftId: stateCopy.lastGiftId,
newMessage: stateCopy.newMessage,
totalVotes: 0
};
return {
...state,
lastMarketId: stateCopy.lastMarketId,
giftList: [...state.giftList, giftStructure],
newMessage: ''
}
case types.SET_MESSAGE:
return {
...state,
newMessage: action.payload,
}
case types.ADD_VOTE:
let stateCopy2 = {...state};
console.log("Already Voted Before: ", stateCopy2.alreadyVoted);
if(stateCopy2.alreadyVoted) {
stateCopy2.totalVotes -= 1;
stateCopy2.alreadyVoted = false;
} else {
stateCopy2.totalVotes += 1;
stateCopy2.alreadyVoted = true;
}
console.log("Already Voted after: ", stateCopy2.alreadyVoted);
return {
...state,
totalVotes: stateCopy2.totalVotes,
alreadyVoted: stateCopy2.alreadyVoted
}
default:
return state;
}
};
export default giftReducer;
List Container
const mapDispatchToProps = dispatch => ({
updateGiftMessage: (e) => {
console.log(e.target.value);
dispatch(actions.setMessage(e.target.value));
},
addGift: (e) => {
e.preventDefault();
console.log("actions: ", actions.addGift);
dispatch(actions.addGift());
},
addVote: (e) => {
e.preventDefault();
//console.log("event: ", e.target.getAttribute('mktid'));
dispatch(actions.addVote(e.target.getAttribute('gift-id')));
}
// }
});
class ListContainer extends Component {
constructor(props) {
super(props);
}
render() {
return(
<div className="All-Lists">
<h1>LIST CONTAINER!</h1>
<AllGiftsDisplay giftList = {this.props.giftList} addGift={this.props.addGift} setNewMessage={this.props.setNewMessage} totalVotes = {this.props.totalVotes} lastGiftId = {this.props.lastGiftId} addVote = {this.props.addVote} lastGiftId = {this.props.lastGiftId}/>
<GiftCreator setNewMessage={this.props.setNewMessage} updateGiftMessage={this.props.updateGiftMessage} addGift={this.props.addGift}/>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ListContainer);

Answer 1

If you don't need to log any intermediate state, or pre/post state:
case types.ADD_VOTE:
return {
...state,
totalVotes: state.totalVotes + (state.alreadyVoted ? -1 : 1),
alreadyVoted: !state.alreadyVoted,
};
Increment/Decrement total votes on value of already voted, and toggle the already voted value.
Using object destructuring, reduces code a little bit
case types.ADD_VOTE:
const { alreadyVoted, totalVotes } = state;
return {
...state,
totalVotes: totalVotes + (alreadyVoted ? -1 : 1),
alreadyVoted: !alreadyVoted,
};