null initialstate in redux reducer is giving me an error

I have a photoReducer set up to receive data from the backend. However, I set it’s initialstate to null (I also set it to an empty array which gave me the same error).

My question is how can I set it to an initial value which would not be null or return an error.

When a new user signs up they will obviously have no data.

Here is my code for the reducer.

export default function PhotosReducer(state = null, action) {
    switch(action.type) {
        case "SetPhotos":
            return {...state, photos: action.payload}
    default:
        return state 
}}
 return (
        <div className="photos">
            {photos.map(photo => {
                return <div key={photo.id}><img src={photo.photourl} loading="lazy" alt="pic" key={photo.id} onClick={() => clickedPhoto(photo)}/>
                </div>
            })}
            {message && <div className="message">{message}</div>}
        </div>
        )
}

This is the error I am getting.

TypeError: Cannot read property 'photos' of null

Answer

Before mapping you can check if it exists and is not empty

this way map is only called if there are some items in an array

 return (
        <div className="photos">
            {photos && photos.length>0 && photos.map(photo => {
                return <div key={photo.id}><img src={photo.photourl} loading="lazy" alt="pic" key={photo.id} onClick={() => clickedPhoto(photo)}/>
                </div>
            })}
            {message && <div className="message">{message}</div>}
        </div>
        )
}