Redux

package.json

@@ -11,7 +11,10 @@
     "react": "^16.3.0-alpha.1",
     "react-native": "0.51.1",
     "react-native-navigation": "^2.0.0",
-    "react-native-ui-lib": "^3.3.32"
+    "react-native-ui-lib": "^3.3.32",
+    "react-redux": "^5.0.7",
+    "redux": "^4.0.0",
+    "redux-promise": "^0.6.0"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.2",

src/posts/posts.actions.js

@@ -0,0 +1,33 @@
+
+const mockPosts = [
+  {
+    userId: 1,
+    id: 1,
+    title: 'Post1',
+    body: 'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
+    img: 'https://images.unsplash.com/photo-1520014380140-c48c62c3ac38?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=24118c3959d020a8aac901ad51bf2618&auto=format&fit=crop&w=120&q=80'
+  },
+  {
+    userId: 2,
+    id: 2,
+    title: 'Post2',
+    body: 'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
+    img: 'https://images.unsplash.com/photo-1520014380140-c48c62c3ac38?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=24118c3959d020a8aac901ad51bf2618&auto=format&fit=crop&w=120&q=80'
+  },
+  {
+    userId: 3,
+    id: 3,
+    title: 'Post3',
+    body: 'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
+    img: 'https://images.unsplash.com/photo-1520014380140-c48c62c3ac38?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=24118c3959d020a8aac901ad51bf2618&auto=format&fit=crop&w=120&q=80'
+  },
+];
+
+export function action$fetchPosts() {
+  return {
+    type: 'FETCH_POSTS',
+    payload: mockPosts
+  };
+}
+
+

src/posts/posts.reducer.js

@@ -0,0 +1,8 @@
+export default function (state = {}, action) {
+  switch (action.type) {
+    case 'FETCH_POSTS':
+      return action.payload;
+    default:
+      return state;
+  }
+}

src/posts/screens/AddPost.js

@@ -1,5 +1,5 @@
 import React, {PureComponent} from 'react';
-import {View, Text, TextInput} from 'react-native-ui-lib';
+import {View, TextInput} from 'react-native-ui-lib';
 import {Navigation} from 'react-native-navigation';
 import PropTypes from 'prop-types';
 
@@ -12,6 +12,7 @@ class AddPost extends PureComponent {
   constructor(props) {
     super(props);
 
+    Navigation.events().bindComponent(this);
     this.onChangeText = this.onChangeText.bind(this);
   }
 
@@ -23,18 +24,18 @@ class AddPost extends PureComponent {
         },
         rightButtons: [{
           id: 'saveBtn',
-          title: 'Save',
+          text: 'Save',
           enabled: false
         }],
         leftButtons: [{
           id: 'cancelBtn',
-          title: 'Cancel'
+          text: 'Cancel'
         }]
       }
     };
   }
 
-  onNavigationButtonPressed(buttonId) {
+  navigationButtonPressed({buttonId}) {
     if (buttonId === 'cancelBtn') {
       Navigation.dismissModal(this.props.componentId);
     } else if (buttonId === 'saveBtn') {
@@ -47,7 +48,7 @@ class AddPost extends PureComponent {
       topBar: {
         rightButtons: [{
           id: 'saveBtn',
-          title: 'Save',
+          text: 'Save',
           enabled: !!text
         }]
       }

src/posts/screens/PostsList.js

@@ -2,16 +2,22 @@ import React, {PureComponent} from 'react';
 import {View, Text} from 'react-native-ui-lib';
 import PropTypes from 'prop-types';
 import {Navigation} from 'react-native-navigation';
+import {connect} from 'react-redux';
+
+import {action$fetchPosts} from '../posts.actions';
 
 class PostsList extends PureComponent {
 
   static propTypes = {
-    componentId: PropTypes.string
+    componentId: PropTypes.string,
+
+    action$fetchPosts: PropTypes.func,
+    posts: PropTypes.array
   };
 
   constructor(props) {
     super(props);
-
+    Navigation.events().bindComponent(this);
     this.pushViewPostScreen = this.pushViewPostScreen.bind(this);
     this.showAddPostModal = this.showAddPostModal.bind(this);
   }
@@ -22,14 +28,18 @@ class PostsList extends PureComponent {
         rightButtons: [
           {
             id: 'addPost',
-            title: 'Add'
+            text: 'Add'
           }
         ]
       }
     };
   }
 
-  onNavigationButtonPressed(buttonId) {
+  componentDidMount() {
+    this.props.action$fetchPosts();
+  }
+
+  navigationButtonPressed({buttonId}) {
     if (buttonId === 'addPost') {
       this.showAddPostModal();
     }
@@ -71,9 +81,16 @@ class PostsList extends PureComponent {
     return (
       <View flex center bg-blue60>
         <Text onPress={this.pushViewPostScreen}>Posts List Screen</Text>
+        <Text>{JSON.stringify(this.props.posts)}</Text>
       </View>
     );
   }
 }
 
-export default PostsList;
+function mapStateToProps(state) {
+  return {
+    posts: state.posts
+  };
+}
+
+export default connect(mapStateToProps, {action$fetchPosts})(PostsList);

src/reducers.js

@@ -0,0 +1,8 @@
+import {combineReducers} from 'redux';
+import postsReducer from './posts/posts.reducer';
+
+const rootReducer = combineReducers({
+  posts: postsReducer
+});
+
+export default rootReducer;

src/screens.js

@@ -1,8 +1,13 @@
 import {Navigation} from 'react-native-navigation';
+import {Provider} from 'react-redux';
+import {store} from './store';
+
+import PostsList from './posts/screens/PostsList';
+
 
 export function registerScreens() {
 
-  Navigation.registerComponent('blog.PostsList', () => require('./posts/screens/PostsList').default);
+  Navigation.registerComponentWithRedux('blog.PostsList', () => PostsList, Provider, store);
   Navigation.registerComponent('blog.AddPost', () => require('./posts/screens/AddPost').default);
   Navigation.registerComponent('blog.ViewPost', () => require('./posts/screens/ViewPost').default);
 

src/store.js

@@ -0,0 +1,7 @@
+import {createStore, applyMiddleware} from 'redux';
+import promise from 'redux-promise';
+import rootReducer from './reducers';
+
+
+const storeWithMiddleware = applyMiddleware(promise)(createStore);
+export const store = storeWithMiddleware(rootReducer);