Have a look at below code snippet:
import React from 'react';
import {data} from '../data'
import MovieCard from './MovieCard'
import Navbar from './Navbar'
import { addMovies, setShowFavourites } from '../actions';
class App extends React.Component {
componentDidMount() {
const {store} = this.props;
store.subscribe(() => {
console.log("UPDATED");
this.forceUpdate();
});
store.dispatch(addMovies(data));
console.log("STATE", this.props.store.getState());
}
isMovieFavourite= (movie) => {
const {favourites} = this.props.store.getState();
const index = favourites.indexOf(movie);
if(index !== -1) {
// Found the movie
return true;
}
return false;
}
onChangeTab = (val) => {
this.props.store.dispatch(setShowFavourites(val))
}
render() {
const {list, favourites, showFavourites} = this.props.store.getState();
console.log("RENDER", this.props.store.getState());
const displayMovies = showFavourites ? favourites : list;
return (
<div className="App">
<Navbar/>
<div className='main'>
<div className='tabs'>
<div className={`tab ${showFavourites ? '' : 'active-tabs'}`} onClick={() => this.onChangeTab(false)}> Movies </div>
<div className={`tab ${showFavourites ? 'active-tabs' : ''}`} onClick={() => this.onChangeTab(true)}> Favourites </div>
</div>
<div className='list'>
{displayMovies.map((movie, index) => {
return <MovieCard
movie={movie}
key={`movie-${index}`}
dispatch={this.props.store.dispatch}
isFavourite={this.isMovieFavourite(movie)}
/>
})}
</div>
{displayMovies.length === 0
? <div className='no-movies'>No Movies to display!</div>
: null
}
</div>
</div>
);
}
}
In this App component, I am getting redux store as props. Now, as per my understanding, the sequence of the consoles should be:
RENDER
UPDATED
STATE
RENDER
But the actual sequence is:
RENDER
RENDER // This render is coming from VM2131 installHook.js:1861 but the value is the same as above
UPDATED
STATE
UPDATED
UPDATED
STATE
RENDER
RENDER // This render is coming from VM2131 installHook.js:1861 but the value is the same as above
I am not able to figure out why it is happening. Ideally, componentDidMount should be called only once after the initial render.
Via Active questions tagged javascript - Stack Overflow https://ift.tt/aYqlT6Q
Comments
Post a Comment