TypeError :state.foo is undefined - redux

Question

When I hit a button that dispatches an action, my app breaks in the reducer. I used to have the filtering in the component but it is cleaner if the logic was in the reducer but the reducer doesn't seem to be able to see the state. It used to be able too.
//reducer.jsx
const initialPizzaOrderStatus =
{
voteList: [],
inCount: 0,
orderLocked: false,
}
const addedVotes = (state = initialPizzaOrderStatus.voteList, action) => {
switch (action.type) {
case ATTENDANCE_SUBMITTED:
if (state.indexOf(action.payload.username) !== -1) {
return state
}
return [ ...state, action.payload.username]
case ATTENDANCE_REVOKED:
if(state.indexOf(action.payload.username) !== -1)
{
return state.filter(function(value){
return value !== action.payload.username;
});
}
return state
default:
return state
}
}
const countVotes = (state = initialPizzaOrderStatus, action) => {
switch (action.type) {
case ATTENDANCE_SUBMITTED:
console.log("countVotes Sub")
console.log(state)
if (state.voteList.indexOf(action.payload.username) !== -1) {
return state.inCount
}
return state.inCount+1
case ATTENDANCE_REVOKED:
console.log("countVotes Rev")
console.log(state)
if(state.voteList.indexOf(action.payload.username) !== -1)
{
return state.inCount - 1
}
return state.inCount
default:
return state.inCount
}
}
export const pizzaOrderReducer = (state = initialPizzaOrderStatus, action={}) =>
{
console.log("pizzaOrderReducer Current State: ")
console.log(state)
switch(action.type)
{
case ORDER_LOCKED:
return Object.assign({}, state, {
orderLocked: true})
case ATTENDANCE_SUBMITTED || ATTENDANCE_REVOKED:
return {
voteList: addedVotes(state.voteList, action),
inCount: countVotes(state.inCount, action),
};
default:
return state
}
}
//action.jsx
import {
ATTENDANCE_SUBMITTED,
ATTENDANCE_REVOKED,
} from './constants'
const voteInUnsafe = ( username ) => ({
type: ATTENDANCE_SUBMITTED,
payload: {
username,
}
});
export const voteIn = (username) => (dispatch) => {
dispatch(voteInUnsafe(username))
}
const voteOutUnsafe = ( username ) => ({
type: ATTENDANCE_REVOKED,
payload: {
username,
}
});
export const voteOut = (username) => (dispatch) => {
dispatch(voteOutUnsafe(username))
}
//VotingContainer.jsx
const VotingContainer = ({ voteIn, voteOut, username }) => (
<VotingButtons>
<div className='button-container'>
<div className='inner-container mt20'>
<Button
variant="contained"
color="default"
onClick={() => voteIn(username)}
>
I'm In!
</Button>
</div>
<div className='inner-container mt20'>
<Button
variant="contained"
color="default"
onClick={() => voteOut(username)}
>
I'm Out!
</Button>
</div>
</div>
</VotingButtons>
)
VotingContainer.propTypes = {
username : PropTypes.string.isRequired,
voteIn: PropTypes.func.isRequired,
voteOut: PropTypes.func.isRequired,
}
const mapDispatchToProps = {
voteIn,
voteOut,
}
export default connect(
null,
mapDispatchToProps,
)(VotingContainer)
I expect it to update the voteList state but it gives me a TypeError when trying to read state in the reducer. See error below
TypeError: state.voteList is undefined
countVotes
E:/Users/Joseph/Documents/GitHub/Pizza Wednesday/ngc.pizza/client/src/reducers.jsx:90
87 | switch (action.type) {
88 | case ATTENDANCE_SUBMITTED:
89 | console.log("countVotes Sub")
> 90 | if (state.voteList.indexOf(action.payload.username) !== -1) {
| ^ 91 | return state.inCount
92 | }
93 | return state.inCount+1

Answer 1

You are passing
state = initialPizzaOrderStatus.voteList so state won't have a voteList in it, is it itself.
change:
if (state.voteList.indexOf(action.payload.username) !== -1)
to:
if (state.indexOf(action.payload.username) !== -1)
Edited:
A better fix could be passing initialPizzaOrderStatus object (as initialState) instead voteList property only. Then you will get the rest of the properties available in state
const addedVotes = (state = initialPizzaOrderStatus.voteList, action) => {
->
const addedVotes = (state = initialPizzaOrderStatus, action) => {