Getting Started with React Native & Redux

Jon Lebensold
Jul 14, 2016 · 3 min read

Last week, my first React Native app landed on the App Store. Last year, Dan Abramov’s presentation on Redux at React Europe provided a compelling pattern for building well structured single-page applications within the React ecosystem.

This year, Bonnie Eisenman’s talk left me excited about where the ecosystem is going and how such a technology is going to enable native cross-platform development. She took the time to share a retrospective around React Native and where she feels the React Native ecosystem is going.

Our team has done some projects with React, Facebook Flux, and Redux and I figured it might be worth sharing what I’ve learned over the last two years.

This video series will describe some of the thinking behind the Redux pattern and how to use it with React Native. I’m assuming that you have some familiarity with NPM, JavaScript, ES6 and React.js.

If you’re new to React.js, check out my course on O’Reilly Media.

By the end of this series, you should be able to put together a simple Redux architecture on React Native for a native iOS application.

I’ve also posted the project on GitHub if you would rather just download the example and poke around. I’ve used the Spoonacular Food API so I can stay focused on React Native.

To run the project locally, you will need to register for a free API key: https://market.mashape.com/spoonacular/recipe-food-nutrition/pricing

If you already have experience with React Native or Redux, I suggest skipping to the 10 minute mark of 5th video since most of the first section deals with the boilerplate required to get everything up and running.

1 . Overview & Demo

Take a look at what we’re building and how React Native stacks up compared to Hybrid (PhoneGap / Cordova / Ionic) and a native application development process.

NOTE: In the video I mention Titanium and mistakenly lumped it in with PhoneGap.

2. Setting up React Native & Redux

I’m going to walk through setting up React Native and importing the packages necessary to make Redux dance.

3. Reviewing Redux Concepts & Folder Structure

Given that we’re cobbling together a bunch of little libraries, we need to setup our project. I walk through some of the concepts in Redux and where they should live in our simple application.

4. Hooking up Redux to React Native

We’ll go through the remaining steps needed to connect react-redux, redux and react together. By the end of this video, we will have refactored the React Native boilerplate and configured some of the redux middleware which will enable us to log actions and handle asynchronous actions down the line.

5. Simple State Mutation with Redux

With all the wires hooked up and our framework in place, we can put the architecture through its paces by making incrementing an integer through a simple reducer.

6. Making Asynchronous Requests with Redux on iOS

With the reducers, actions and components functioning correctly, we can now use the fetch() API (which is wrapping native iOS networking libraries under the hood), to talk to our RESTful endpoint.

7. Styling React Native Components

Our application works, but it’s not pretty. Let’s fix that.

8. Handling User Input and Tidying Up

I’m going to put the remaining touches on this simple application and enable folks to put in random ingredients and get appropriate recipe suggestions.

Written by

Maker of things on the web, co-founder at Paradem - https://www.paradem.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade