Subscribing to the portion of the state each component needs (Store-external state and App Global State)

Author: brenda-jimenez

lib/components/App.js

@@ -3,12 +3,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import pickBy from 'lodash.pickby';
+import Perf from 'react-addons-perf';
+
+if(typeof window !== 'undefined') {
+    window.Perf = Perf;
+}
 
 import ArticleList from './ArticleList';
 import SearchBar from './SearchBar';
 import Timestamp from './Timestamp';
 
-class App extends React.Component {
+class App extends React.PureComponent {
 
     //****** I need the following lines to expose the CONTEXT
     //to make the context api work we need to define the context type
@@ -22,25 +27,48 @@ class App extends React.Component {
             store: this.props.store
         };
     }
-
     //********
 
-    state = this.props.store.getState();
+
+    //**** Subscribing to a portion of the state,
+    //pretty much just returning what we really need as a state for this particular component
+    appState =()=>{
+        const {articles, searchTerm} = this.props.store.getState();
+        return  {articles, searchTerm};
+    };
+
+    state = this.appState();
+    //****
+
 
     onStoreChange = () => {
-        this.setState(this.props.store.getState);
+        //this.props.store.getState....we dont need to read directly from the props state but our own implementation
+        this.setState(this.appState);
     }
 
     componentDidMount() {
         //we need to update the component state so the app component state is in sync to the store state
         this.subsciptionId = this.props.store.subscribe(this.onStoreChange);
         this.props.store.startClock();
+
+
+        //TODO: Leaving this purposely uncommented. Be aware that in production this has to be commented.
+        //We need consistent measures that's why we need to add this lines so we messure the components at the same point
+        //Those numbers need to be the same every time we refresh
+        setImmediate(()=>{Perf.start();});
+        setTimeout(()=>{ Perf.stop();
+        Perf.printWasted();},5000);
     }
 
     componentWillUnmount() {
         this.props.store.unsubscribe(this.subscriptionId);
     }
 
+    componentWillUpdate(nextProps, nextState)
+    {
+        console.log('Updating TimeStamp');
+    }
+
     //In react we cannot return two elements unless
     //Option 1. is in an array so we need to pass a Key elements
     // render() {
@@ -68,6 +96,15 @@ class App extends React.Component {
     // we can  make a StateApi an event emmiter (Flux)
     // or manage subscriptions in the same object
 
+
+    //To solve rendering the articles if the properties have not changed
+    //Just re-render if you need to
+    //Downside is that we will have to update this method if we have another property
+    // shouldComponentUpdate(nextProps, nextState){
+    //     return (nextState.articles !== this.state.articles ||
+    //             nextState.searchTerm !== this.state.searchTerm);
+    // }
+
     render() {
         let {articles, searchTerm} = this.state;
         //making the search case insensitive

lib/components/Article.js

@@ -61,6 +61,7 @@ Article.propTypes = {
     })
 };
 
+//We are using props that do not use the state
 function extraProps(store, originalProps) {
     return {
         author: store.lookupAuthor(originalProps.article.authorId)

lib/components/Timestamp.js

@@ -2,36 +2,42 @@
 import React from 'react';
 import storeProvider from './storeProvider';
 
-class Timestamp extends React.PureComponent{
+class Timestamp extends React.Component{
 
-    timeDisplay =  (timestamp) => timestamp.toLocaleTimeString([],{hour: '2-digit', minute:'2-digit'});
+    static timeDisplay =  (timestamp) => timestamp.toLocaleTimeString([],{hour: '2-digit', minute:'2-digit'});
 
-    //We will do a custom should component update so it just updates based on the time and minutes update
-    shouldComponentUpdate(nextProps, nextState){
-        //const currentTimeDisplay= this.props.timestamp.toLocaleTimeString([],{hour: '2-digit', minute:'2-digit'});
-        //const nextTimeDisplay= nextProps.timestamp.toLocaleTimeString([],{hour: '2-digit', minute:'2-digit'});
-        //So if it is different re render just every minute not every second
-        //return currentTimeDisplay !== nextTimeDisplay;
 
-        //Simplified version
-        return (this.timeDisplay(this.props.timestamp) !=
-                this.timeDisplay(nextProps.timestamp));
-    }
+    //This logic is causing the Timestamp component to render every minute, in order to avoid that we
+    //will move the ShouldComponentUpdate one level up to the Container Component
+
+
+    // //We will do a custom should component update so it just updates based on the time and minutes update
+    // shouldComponentUpdate(nextProps, nextState){
+    //     //const currentTimeDisplay= this.props.timestamp.toLocaleTimeString([],{hour: '2-digit', minute:'2-digit'});
+    //     //const nextTimeDisplay= nextProps.timestamp.toLocaleTimeString([],{hour: '2-digit', minute:'2-digit'});
+    //     //So if it is different re render just every minute not every second
+    //     //return currentTimeDisplay !== nextTimeDisplay;
+    //
+    //     //Simplified version
+    //     return (this.timeDisplay(this.props.timestamp) !=
+    //             this.timeDisplay(nextProps.timestamp));
+    // }
+
 
-    componentWillUpdate(nextProps, nextState)
-    {
-        console.log('Updating TimeStamp');
-    }
 
     render(){
-        return(<div>{this.props.timestamp.toLocaleTimeString([],{hour: '2-digit', minute:'2-digit'})}</div>);
+        return(<div>{this.props.timestampDisplay}</div>);
     }
 }
 
+//We are using props that use the state (Contrary to articles List )
 function extraProps(store)
 {
+    //This is the only component that is actually making use of the state
+    //timestamp: store.getState().timestamp
     return {
-        timestamp: store.getState().timestamp
+
+        timestampDisplay: Timestamp.timeDisplay(store.getState().timestamp)
     };
 }
 

lib/components/__tests__/ArticleList.js

@@ -3,7 +3,7 @@ import React from 'react';
 //import renderer from 'react-test-renderer';
 import ArticleList from '../ArticleList';
 import { configure, shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-15';
 
 configure({ adapter: new Adapter() });
 

lib/components/storeProvider.js

@@ -15,6 +15,8 @@ const storeProvider = (extraProps = () =>({})) => (Component) => {
         static displayName = `${Component.name}Container`;
         static contextTypes = {store: PropTypes.object};
 
+
+        //only the properties of the state that have been used for the warp component
         usedState = () => {
             return extraProps(this.context.store, this.props);
         };
@@ -40,6 +42,8 @@ const storeProvider = (extraProps = () =>({})) => (Component) => {
             this.subscriptionId = null;
         }
 
+
+
         render(){
            return <Component
                {...this.props}

lib/state-api/lib/index.js

@@ -7,12 +7,8 @@ class StateApi{
             authors: this.mapIntoObject(rawData.authors),
             searchTerm :'',
             timestamp: new Date()};
-
         this.subscriptions ={};
-
         this.lastSubscriptionId=0;
-
-
     }