Inspired by http://blog.tylerbuchea.com/super-simple-react-redux-application-example/
Update 14/12/2018: Fixed code errors spotted by Enjin Nine… thank you very much!
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
