React Native + Redux (Part 1)

Not a todo app example!

Before we get into how Redux, lets first understand the life cycle without redux! (If you’d like to skip this, here’s Part2)

Whats that?

Consider a sample app that has a logout functionality. To make it easy to understand, we will assume that we are always logged in to our app (i.e on load, loggedIn = true).

Components with data-flow for this example

Lets go ahead and create our parent component that holds a header component inside it. (P.S boiler plate code is ignored)

import Header from ‘./header’
export default class ParentComponent extends Component {
 constructor(props) {
  super(props);
  this.state = {
   loggedIn: true
  }
  this.logout = this.logout.bind(this)
 }
 
 logout() {
  this.setState ({
   loggedIn: false
  })
 }
render() {
  if (this.state.loggedIn) {
   return (
    <View style={{backgroundColor:”#000",
          width: 500, 
          height: 1000}}>
     <Header headerLogout={this.logout}/>
    </View>
   );
  }
  else {
   return (
    <Text style={{margin: 120}}>You are logged out!</Text>
   )
  }
 }
}

Notice in the above component, we are specifying an event handler for the child component when logout is triggered in header. This handler basically sets the state from true to false when called.

Now lets create our Header component which is called inside our parent component.

import LogoutButton from ‘./button’
export default class Header extends Component {
 render() {
  return (
   <View style={{backgroundColor:”#fff”,
         width: 375, height: 100, flexDirection: “row”,
         alignItems: “center”, justifyContent: “space-between”}}>
    <Text style={{fontSize: 25, margin: 20}}>Header Title</Text>
    <LogoutButton buttonLogout={this.props.headerLogout}/>
   </View>
  );
 }
}

Notice that we are again creating a handler for LogoutButton which means that, on buttonLogout, trigger this.props.headerLogout. This might seem like we are chaining our components a bit too much, but in real world, you’d see well more than two children propagation for every parent component.

Now we will create our final piece, which is the button component. This is where our button press is actually triggered that calls the logout functionality thats sitting in the parent.

export default class LogoutButton extends Component {
 render() {
  return (
   <TouchableHighlight
    onPress={this.props.buttonLogout}
    underlayColor=”transparent”
    style={{margin: 20}}>
     <View style={{backgroundColor:”#ccc”, 
           width: 50, height: 50}} />
   </TouchableHighlight>
  );
 }
}

With all the components wired up, here is a demo of what we are trying to achieve from the above.

We select the grey LogoutButton to change the state to false in order to logout!

As simple as that! Lets try to dig into this further by understanding whats good and bad about this approach.

Whats Good?

Not too many files. We clearly know our components, and plan who to send down the state to.

Whats Not Good?

If you notice, Header component has absolutely no reason why it should participate in passing data between Parent and LogoutButton component. Because it happened to be in the way, its now being made to communicate between the two.

We are tightly coupling components in this approach. In larger applications this becomes an issue considering the fact that our LogoutButton component is dependent on the Header for data. If we were to split this example into three pieces, we would have Header and LogoutButton component not working because of their tight coupling with parent.

… And that is why we have Redux! Ideally we want our app to be able to Set and Get state from any child or parent or sub-child without ever having to depend on parents for passing data or handling events on propagation.

In my next article, I will talk about how to introduce redux to this example and get a clear picture on the difference in implementation!

Hope you enjoyed reading this article! (P.S Just started learning React Redux). Please feel free to post your questions/opinions/suggestions :)