ComponentDidMount is not working. ReactJs - reactjs

Question

I have problem with calling componentDidMount.
Situation:
I have 2 reducers. They called in different components and do not intersect. In every component in ComponentDidMount i calling function from Reducer which set data. In different ways one of two is not working and function from reducer is not called. I have error like "Cannot read property of null". After reload page working of components is changed.
First Reducer:
const SET_VIDEOS = 'SET_VIDEOS';
const TOOGLE_IS_FETCHING = 'TOOGLE_IS_FETCHING';
let initialState = {
videos: null,
isFetching: null
}
const youtubeReducer = (state = initialState, action) => {
switch(action.type){
case SET_VIDEOS: {
console.log("muerto.");
return {...state, videos: action.videos}
}
case TOOGLE_IS_FETCHING: {
return {...state, isFetching: action.isFetching}
}
default:{
return state;
}
}
}
export const setVideos = (videos) => ({
type: SET_VIDEOS, videos
});
export const setIsFetching = (isFetching) => ({
type: TOOGLE_IS_FETCHING, isFetching
});
export const getVideosThunkCreator = () => {
return(dispatch) => {
dispatch(setIsFetching(true));
console.log("ALO");
youtubeApi.getVideos().then(data => {
dispatch(setVideos(data.items));
dispatch(setIsFetching(false));
console.log(data.items);
})
}
}
Second Reducer:
let initialState = {
dj: null,
isFetching: null
}
const djReducer = (state = initialState, action) => {
switch(action.type){
case SET_DJ:{
console.log("muerto2.");
return {...state, dj: action.dj}
}
case TOOGLE_IS_FETCHING: {
return {...state, isFetching: action.isFetching}
}
default:
return state;
}
}
export const setDj = (dj) => ({
type: SET_DJ, dj
});
export const setIsFetching = (isFetching) => ({
type: TOOGLE_IS_FETCHING, isFetching
});
Container Component with First Reducer:
class LivesContainer extends React.Component{
componentDidMount(){
this.props.getVideosThunkCreator();
console.log(this.props);
}
render(){
return(
<>
{this.props.isFetching ? <Preloader/> : <Lives videos={this.props.videos}/>}
</>
);
}
}
let mapStateToProps = (state) => {
return{
videos: state.youtubeReducer.videos,
isFetching: state.youtubeReducer.isFetching
}
}
export default connect(mapStateToProps, {
getVideosThunkCreator,
setIsFetching
})(LivesContainer);
Container Component with Second Reducer:
class DjContainer extends React.Component {
componentDidMount(){
console.log("MOUNT");
let djId = this.props.match.params.djId;
if(!djId){
djId = 0;
}
let djs = this.props.djs;
this.props.setIsFetching(true);
console.log(djs);
console.log(djId);
djs.forEach(dj => {
if(dj.id == djId){
this.props.setDj(dj);
this.props.setIsFetching(false);
}
});
console.log(this.props);
}
componentWillUnmount(){
console.log("UNMAUNT");
}
render(){
return(
<>
{this.props.isFetching ? <Preloader/>:
<Dj {...this.props} dj={this.props.dj} />
}
</>
);
}
}
let mapStateToProps = (state) => ({
dj: state.djReducer.dj,
djs: state.djsReducer.djs,
isFetching: state.djReducer.isFetching
});
let WithUrlDataContainerComponent = withRouter(DjContainer);
export default connect(mapStateToProps,{
setDj,
setIsFetching
})(WithUrlDataContainerComponent);
First Component where i have errors:
const Lives = (props) => {
let bannerId;
let videoBanner = "https://www.youtube.com/embed/";
let videos = [];
props.videos.forEach((video,index) => {
if(index == 0){
bannerId = video.contentDetails.videoId;
}else{
videos.push(video);
}
});
console.log(videos);
videoBanner += bannerId;
let videosMap = videos.map((video,index) => {
return <Video video={video} key={index}/>
})
return(
<div className={classes.main}>
<div className={classes.container}>
<h1>Our videos</h1>
<div className={classes.videos}>
<iframe width="90%" height="80%" src={videoBanner} frameborder="0" allow="accelerometer; autoplay=1; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div className={classes.videoList}>
{videosMap}
</div>
</div>
</div>
</div>
);
}
error from there:
props.videos.forEach((video,index) => {
if(index == 0){
bannerId = video.contentDetails.videoId;
}else{
videos.push(video);
}
});
From Secornd Component:
const Dj = (props) => {
console.log(props);
let video = "https://www.youtube.com/embed/" + props.dj.video;
return(
<div className={classes.main}>
<div className={classes.container}>
<h1>{props.dj.name}</h1>
<iframe width="90%" height="80%" src={video} frameborder="0" allow="accelerometer; autoplay=1; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div className={classes.links}>
<a href={props.dj.fb} target="_blank">
<img src={fb}/>
</a>
<a href={props.dj.sound} target="_blank">
<img src={sound}/>
</a>
<a href={props.dj.inst} target="_blank">
<img src={inst}/>
</a>
</div>
</div>
</div>
);
}
Error from there:
let video = "https://www.youtube.com/embed/" + props.dj.video;