Super Simple React Native Redux Example

Posted on by David Vassallo

Inspired by http://blog.tylerbuchea.com/super-simple-react-redux-application-example/

In this article we explore the barest of solutions to get started with React Native + Redux. The only pre-requisite to the below is to have “create-react-native-app” installed (https://facebook.github.io/react-native/docs/getting-started.html)

Setup

create-react-native-app superSimple
cd superSimple
npm install --save redux react-redux

redux.js

 

App.js

Notes

  • In most create-react-native-app + redux tutorials that I researched, most mentioned the use of index.android.js or index.ios.js to connect Redux to the React App component. These files are not automatically created by create-react-native-app so I wanted to avoid introducing them.
  • The solution was to create a new “inner component” which I named AppInner in lines 13-23 above. This component contains the JSX of the original App component, which you can extend to contain whatever content you wish
  • Next, we use the connect function to map state and dispatch to props in the AppInner component (lines 57-60).
  • Finally, we change the original App component to point towards the component created by the connect step above (AppContainer in my example above – line 57). Notice how we wrap this in a Provider component to make the store available
Advertisements