Programming

ReactJS/Redux Exception – Uncaught TypeError: Cannot read property ‘type’ of undefined

ReactJS/Redux Exception – Uncaught TypeError: Cannot read property ‘type’ of undefined

This issue might occur in many cases but one case which is hard to troubleshoot and debug is as given below. The typical call stack looks as follows for the exception

Uncaught TypeError: Cannot read property 'type' of undefined
at bundle.js:64518
    at bundle.js:64518
    at Array.forEach (<anonymous>)
    at x (bundle.js:64518)

One can make out nothing from the call stack, it looks meaningless. Hence the debugging will be tedious job in ReactJS . 

Solution for the above exception

check whether return statement with dispatch is missing in your redux action method.

  return (function (dispatch) {

  });

Your action should have return statement as shown above.

More Read About ReactJS:

Advantages of React Stateless Functional Components

Advantages of React Stateless Functional Components

Before reading this post, if you have not gone through what are functional components in Reactjs then kindly go through this post

In this post we will see what are the advantages of functional posts in React js. If you check your react js code, you will quickly figure out that many components do not actually need state, they do get data from parent as props and will render the information. In such a case why to introduce state and make it complicated? rather I would prefer calling a function which returns me a component. Isn’t it so simple ? React 14 introduced Functional Components, also called as stateless components and removed unnecessary complications. So let us explore what are the advantages of stateless components 

Advantages of React Functional/Stateless Components: Ref

1. More focused on presentation

React is forcing us to write components which are used only for presentational purpose, these components are useful for dumb presentational purpose only, that focus on UI rather than behaviour. Technically speaking its normal tendency to go for stateful components, doing that way we are making our code easily hackable where every damn component keeps its own local state. Functional components allowing us to have pure components which just focus on presentation. where as the state is maintained by few higher level components.

2. Gain in Performance

Stateless components will bring performance gain since there is no state and lifecycle of a component. React doesn’t need to have unnecessary check and memory allocations which eventually brings performance boost.

3. Clean and Optimised Code

Stateless components reduce lot of code, almost 20% – 30% reduction in code and hence the code will become clean and optimised.

4. Easy to debug

Functional components are pure components and helps your to analyse your code quickly and you no need to put log if assert calls everywhere to debug. 

React more on React

React More on ReactNative 

React Native List View : Animate Rows While Scrolling Using FlatList

React Native List View : Animate Rows While Scrolling Using FlatList

In my previous post I have written about how to use React Native FlatList and we have seen the issues we face with pagination also how to add a loading indicator in the footer of FlatList. You can first read about it Link In this post we will see how to animate the rows while scrolling a FlatList.

Animating Rows In React Native FlatList :

To achieve animation for FlatList Rows, you have to install an npm module react-native-animatable, which provides variety of smooth animations for List Rows.

Installation of npm module:

$ npm install react-native-animatable --save

 

To make a continuous animation do this

<Animatable.Text animation="slideInDown" iterationCount={5} direction="alternate">Up and down you go</Animatable.Text>
<Animatable.Text animation="pulse" easing="ease-out" iterationCount="infinite" style={{ textAlign: 'center' }}>❤</Animatable.Text>

 

To animate rows in FlatList Rows do this

import * as Animatable from 'react-native-animatable';

class FlatListRow extends Component {
  render(){
    return(
      <Animatable.View animation='fadeInUp'>;
       <TouchableWithoutFeedback>;
          // here your row component
       </TouchableWithoutFeedback>;
      </Animatable.View>;
    );
  }
}

Variety of animations are supported in this React Native Animation library

React Native List View : Pagination With FlatList – Building A Great Scrollable List In React Native

React Native List View : Pagination With FlatList  – Building A Great Scrollable List In React Native

FlatList is is an interface used to render flat list, the component is provided by Facebook’s React Native Library

Handy features of FlatList are as follows

  1. It renders list of items if you just provide rendering View
  2. You can mention whether your list is horizontal or vertical, by default its vertical list view
  3. Configurable Callbacks provided 
  4. Header / Footer / Separator are supported by FlatList
  5. Pull To Refresh is made simple with React Native Flat List View
  6. Pagination is made easy using React Native Flat List view

How To Use React Native Flat List Component: With Loading symbol in Footer

<FlatList
          refreshing={this.state.refreshing}
          onRefresh={true}
          onEndReachedThreshold={0.5}
          onEndReached={({ distanceFromEnd }) => {
            //Call API to fetch next page of data
            console.log('on end reached ', distanceFromEnd);
          }}
          ListFooterComponent={(
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Spinner color='#6d4c41' />
              <Text>Loading please wait...</Text>
            </View>
          )}
          data={this.props.messages}
          renderItem={this.notificationContent.bind(this)}
          keyExtractor={(item) => item._id}
        />

React Native Pull To Refresh Using Flat List

Pull to refresh is made easy by just mentioning onRefresh = true and we should also mention refreshing = true while fetching new data 

Pagination Using Flat List In React Native

To achieve pagination mention onEndReachedThreshold some value between 0 – 1 and  a callback for onEndReached should be provided where we have a logic to call API to fetch next page of data

Official documentation of React Native FlatList has many more functionalities listed.

Issues with React Native FlatList or onEndReached doesn’t get fired

Some times pagination for FlatList doesn’t work as expected, onEndReached Will never get fired, or some times it will be called only first time when list is loaded. Possible reason for this behaviour would be keeping FlatList inside native base Container or Content, Keep FlatList inside View to fix the issue. 

Another possible solution to the issue of FlatList is changing onEndReachedThreshold value to a small number like 0.001.

Another Interesting solution which worked for me is giving height explicitly to the FlatList , this will call onEndReached callback

style={{ height: ( Dimensions.get(‘window’).height – 100 ) }}

Addressing The issue : React Native FlatList onEndReached called again and again

This can be addressed by ignoring the callback calls, this is can be done by using distanceFromEnd, if the value is +ve then do your pagination stuffs, if the value is    -ve then ignore the callback call. ReactNative FlatList returns +ve value when scroll reaches the end of the list. So the update code looks like below

<FlatList
          refreshing={this.state.refreshing}
          onRefresh={true}
          onEndReachedThreshold={0.5}
          onEndReached={({ distanceFromEnd }) => {
            if (distanceFromEnd >= 0) {
              //call API to get next page values
            }
            console.log('on end reached ', distanceFromEnd);
          }}
          data={this.props.messages}
          renderItem={this.notificationContent.bind(this)}
          keyExtractor={(item) => item._id}
        />


Also Explore React Native Exceptions

ReactNative Exception: TabNavigator expected a component class, got [object, object]

ReactNative Exception: TabNavigator expected a component class, got [object, object]

Possible cases to get ReactNative Error: ReactNative Exception: TabNavigator expected a component class, got [object, object] .

  1. When you are using a component with all small letters or a component that begin with small letter, Example

 

const FooterTabNavigation = TabNavigator(
  {
    Home: {
      screen: ({ screenProps, navigation }) => <homePage navigation={navigation} />
    },
 });

 

Solution : Use Capitalised class names, like HomePage navigation={navigation}

2. Another case is if by any chance you are using <div> component in ReactNative this exception might occur.
Example

const FooterTabNavigation = TabNavigator(
  {
    Home: {
      screen: ({ screenProps, navigation }) =&gt; &lt;homePage navigation={navigation} /&gt;
    },
    TestScreen: {
      screen: ({ screenProps, navigation }) =&gt; &lt;div /&gt;
    }
});

 

Solution : Do not use div tag in ReactNative instead use View

Explore More About React Native : React Native FlatList And Pagination

ReactJS : Functional or Stateless components

ReactJS : Functional or Stateless components

Many times you might come across a situation where React Component doesn’t need any state, which we call as stateless components. Thanks to React0.14 update, It introduced new types of react components with no state. 

React Stateless components are very much needed when the components is readonly doesn’t perform any operation other than just showing information.

How to Write React Functional component ?

React Functional Component Example: for stateless react component or a functional react component

const MessageBar = function(props) {
  return &lt;p&gt;Dear {props.username} you have completed the task successfully&lt;/p&gt;;
};

The same component can nicely be written in one line using ES2015 standard as follows

const MessageBar = ({ username }) =&gt; &lt;p&gt;Dear {username} user, you have successfully completed the task&lt;/p&gt;;

 

Conceptually components are like javascript functions here, they accept inputs as props, and return react elements. Functional components wherever required will also reduce load on redux since it is not required to maintain state for these components.

For more information on React functional components visit facebook react official site 

Check Advantages of React Functional Components

Also Check How to integrated Google Maps in reactJS : http://knowledge-cess.com/reactjs-google-map-component/

 

Java Springs SEVERE Exception : javax.servlet.ServletException: Circular view path

Java Springs SEVERE  Exception : javax.servlet.ServletException: Circular view path

Exception : occurred while calling REST API in Springs

 org.apache.catalina.core.StandardWrapperValve invoke SEVERE:

Servlet.service() for servlet [Spring] in context with path [/app] threw exception

[Circular view path [events]: would dispatch back to the current handler URL [/app/service/events] again. Check your ViewResolver setup! (Hint: This may be the result of an unspecified view, due to default view name generation.)] with root cause javax.servlet.ServletException: Circular view path [events]: would dispatch back to the current handler URL [/app/service/events] again. Check your ViewResolver setup! (Hint: This may be the result of an unspecified view, due to default view name generation.) at org.springframework.web.servlet.view.InternalResourceView.prepareForRendering(InternalResourceView.java:209) at org.springframework.web.servlet.view.InternalResourceView.renderMergedOutputModel(InternalResourceView.java:149) at org.springframework.web.servlet.view.AbstractView.render(AbstractView.java:303) at org.springframework.web.servlet.DispatcherServlet.render(DispatcherServlet.java:1228) at org.springframework.web.servlet.DispatcherServlet.processDispatchResult(DispatcherServlet.java:1011) at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:955) at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:877) at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:961) at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:852) at javax.servlet.http.HttpServlet.service(HttpServlet.java:622) at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:837) at javax.servlet.http.HttpServlet.service(HttpServlet.java:729) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:291) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206) at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:239) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:219) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:106) at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:502) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:142) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:79) at org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAccessLogValve.java:616) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:88) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:518) at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1091) at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:673) at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1526) at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.run(NioEndpoint.java:1482) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617) at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) at java.lang.Thread.run(Thread.java:745)

Solution :

Change your controller API signature from

public EventListResponse fetchEvents() 

To

public @ResponseBody EventListResponse fetchEvents

javax.persistence.PersistenceException : NonUniqueDiscoveredSqlAliasException

javax.persistence.PersistenceException : NonUniqueDiscoveredSqlAliasException

Exception javax.persistence.PersistenceException: org.hibernate.loader.custom.NonUniqueDiscoveredSqlAliasException: Encountered a duplicated sql alias [id] during auto-discovery of a native-sql query at org.hibernate.jpa.spi.AbstractEntityManagerImpl.convert(AbstractEntityManagerImpl.java:1763) at org.hibernate.jpa.spi.AbstractEntityManagerImpl.convert(AbstractEntityManagerImpl.java:1677) at org.hibernate.jpa.internal.QueryImpl.getResultList(QueryImpl.java:458) $$FastClassBySpringCGLIB$$ad104aa9.invoke( <generated>) at org.springframework.cglib.proxy.MethodProxy.invoke(MethodProxy.java:204) at org.springframework.aop.framework.CglibAopProxy$CglibMethodInvocation.invokeJoinpoint(CglibAopProxy.java:717) at org.springframework.aop.framework.ReflectiveMethodInvocation.proceed(ReflectiveMethodInvocation.java:157) at org.springframework.aop.framework.adapter.AfterReturningAdviceInterceptor.invoke(AfterReturningAdviceInterceptor.java:52) at org.springframework.aop.framework.ReflectiveMethodInvocation.proceed(ReflectiveMethodInvocation.java:179) at org.springframework.aop.aspectj.AspectJAfterThrowingAdvice.invoke(AspectJAfterThrowingAdvice.java:58) at org.springframework.aop.framework.ReflectiveMethodInvocation.proceed(ReflectiveMethodInvocation.java:179) at 

Solution : 

Give different alias to each column you are selecting. This happens mainly due to same column names in different tables.

Something like this “select u.id as userid, adm.id as adminId from user as u, admin as adm”

Caused by: java.lang.ClassNotFoundException: org.hibernate.cache.EntityRegion

Caused by: java.lang.ClassNotFoundException: org.hibernate.cache.EntityRegion

Caused by: java.lang.ClassNotFoundException: org.hibernate.cache.EntityRegion

OR

Caused by: org.hibernate.cache.NoCacheRegionFactoryAvailableException: Second-level cache is used in the application, but property hibernate.cache.region.factory_class is not given; please either disable second level cache or set correct region factory using the hibernate.cache.region.factory_class setting and make sure the second level cache provider (hibernate-infinispan, e.g.) is available on the classpath.

 

Solution

  1.  Replace POM dependency for net.sf.ehcache : ehcache-core

  Replace below lines

                
		dependency
			net.sf.ehcache
			ehcache-core
			2.6.11
		/dependency
		

From below lines

		
		dependency
			org.hibernate
			hibernate-ehcache
			4.3.5.Final
		/dependency
		

2. set Factory_class in spring.xml file as given below

Replace below lines

				prop key="hibernate.cache.region.factory_class" net.sf.ehcache.hibernate.EhCacheRegionFactory/prop
				prop key="hibernate.cache.use_query_cache"&gt; true/prop

With below lines

				prop key="hibernate.cache.region.factory_class"&gt; org.hibernate.cache.ehcache.EhCacheRegionFactory /prop
				prop key="hibernate.cache.use_query_cache"&gt;true /prop

3.  Then use setCacheable(true); for your queries in hibernate criteria