gallinule

Gallinule is a small React app to browse iOS App Store reviews for popular Australian property apps.

Background

This project is part of 52projects and the new stuff that I learn through this project: Redux and styled-components.

This project builds on top of my React experience with Dipper. I learn to use Redux for state management and styled-components for styling.

Project

Gallinule retrieves and displays iOS App Store reviews from Apple iTunes site. It has a very simple interface where a user can select an iOS Australian property app and Gallinule shows the user reviews for that particular app. The screenshot of Gallinule:

Implementation

Dipper is implemented using React, Redux, and styled-components. It is deployed on Netlify.

Instead of CSS, we use styled-components to provide styling for the React components. For example, this is how we style the web links:

import styled from 'styled-components';

const A = styled.a`
  color: silver;

  &:hover {
    color: powderblue;
  }
`;

export default A;

And we can use the A component like this:

import styled from 'styled-components';

class Footer extends Component {
  render() {
    return (
      <div>
        <A href="https://facebook.github.io/react/">React</A>
      </div>
    );
  }
}

export default Footer;

We use Redux for managing states in Gallinule with actions and reducers. Take a look at the main App.js (that is largely based on the Redux Async example) to see how they are used.

Conclusion

Redux's documentation is really great and they provide plenty of examples. But, it takes a while for me to wrap my head around Redux. I understand the concepts of actions, reducers, and a single store; since Redux is taking cues from Elm. But maybe, if I could take a guess, it's because that I'm not quite familiar with the modern JavaScript language. A few times, I need to open JavaScript documentation and read about the spread syntax and arrow functions. Having said that, I like Redux and its architecture that revolves around a strict unidirectional data flow. And also, their approach of Presentational and Container Components. I think it's a good way to architect large scale apps.

I can see why a lot of people like to use styled-components and it's interesting to read about how it is implemented using ES6 Tagged Template Literals. Definitely a thumbs-up from me.