Add redux and redux-saga with documentation and an example

App/App.js

@@ -1,8 +1,29 @@
 import React, { Component } from 'react'
-import { HomeScreen } from 'App/Containers/HomeScreen'
+import HomeScreen from 'App/Containers/HomeScreen'
+import { Provider } from 'react-redux'
+import { PersistGate } from 'redux-persist/lib/integration/react'
+import createStore from 'App/Stores'
+
+const { store, persistor } = createStore()
 
 export default class App extends Component {
   render() {
-    return <HomeScreen />
+    return (
+      /**
+       * @see https://github.com/reduxjs/react-redux/blob/master/docs/api.md#provider-store
+       */
+      <Provider store={store}>
+        {/**
+         * PersistGate delays the rendering of the app's UI until the persisted state has been retrieved
+         * and saved to redux.
+         * The `loading` prop can be `null` or any react instance to show during loading (e.g. a splash screen),
+         * for example `loading={<SplashScreen />}`.
+         * @see https://github.com/rt2zz/redux-persist/blob/master/docs/PersistGate.md
+         */}
+        <PersistGate loading={null} persistor={persistor}>
+          <HomeScreen />
+        </PersistGate>
+      </Provider>
+    )
   }
 }

App/Containers/HomeScreen.js

@@ -1,18 +1,28 @@
 import React from 'react'
 import { Platform, StyleSheet, Text, View } from 'react-native'
+import { connect } from 'react-redux'
+import { PropTypes } from 'prop-types'
+import ExampleActions from 'App/Stores/Example/Actions'
 
 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
   android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu',
 })
 
-export class HomeScreen extends React.Component {
+class HomeScreen extends React.Component {
+  componentDidMount() {
+    this.props.refreshTemperature()
+  }
+
   render() {
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>Welcome to React Native!</Text>
         <Text style={styles.instructions}>To get started, edit App.js</Text>
         <Text style={styles.instructions}>{instructions}</Text>
+        <Text style={styles.instructions}>
+          The weather temperature is: {this.props.temperature}
+        </Text>
       </View>
     )
   }
@@ -34,3 +44,20 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
 })
+
+HomeScreen.propsTypes = {
+  temperature: PropTypes.number,
+}
+
+const mapStateToProps = (state) => ({
+  temperature: state.example.get('weatherTemperature'),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  refreshTemperature: () => dispatch(ExampleActions.requestWeatherTemperature()),
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(HomeScreen)

App/Sagas/ExampleSaga.js

@@ -0,0 +1,16 @@
+import { put } from 'redux-saga/effects'
+import ExampleActions from 'App/Stores/Example/Actions'
+
+/**
+ * A saga can contain multiple functions.
+ *
+ * This example saga contains only one to fetch the weather temperature.
+ */
+export function* fetchWeatherTemperature() {
+  // Fetch the temperature from an API (in this example we hardcode 24 degrees)
+  const temperature = 24
+
+  // Dispatch a redux action using `put()`
+  // @see https://redux-saga.js.org/docs/basics/DispatchingActions.html
+  yield put(ExampleActions.updateWeatherTemperature(temperature))
+}

App/Sagas/README.md

@@ -0,0 +1,3 @@
+[Redux Saga](https://redux-saga.js.org/) is a library that makes application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage.
+
+This directory contains the sagas of the application. Sagas will for example connect to an API to fetch data, perform actions, etc.

App/Sagas/index.js

@@ -0,0 +1,13 @@
+import { takeLatest } from 'redux-saga/effects'
+import { ExampleTypes } from 'App/Stores/Example/Actions'
+import { fetchWeatherTemperature } from './ExampleSaga'
+
+export default function* root() {
+  yield [
+    /**
+     * @see https://redux-saga.js.org/docs/basics/UsingSagaHelpers.html
+     */
+    // Call `fetchWeatherTemperature()` when a `REQUEST_WEATHER_TEMPERATURE` action is triggered
+    takeLatest(ExampleTypes.REQUEST_WEATHER_TEMPERATURE, fetchWeatherTemperature),
+  ]
+}

App/Stores/CreateStore.js

@@ -0,0 +1,47 @@
+import { applyMiddleware, compose, createStore } from 'redux'
+import createSagaMiddleware from 'redux-saga'
+import { persistReducer, persistStore } from 'redux-persist'
+import immutableTransform from 'redux-persist-transform-immutable'
+
+// Defaults to localStorage for web and AsyncStorage for react-native
+import storage from 'redux-persist/lib/storage'
+
+const persistConfig = {
+  transforms: [
+    /**
+     * This is necessary to support immutable reducers.
+     * @see https://github.com/rt2zz/redux-persist-transform-immutable
+     */
+    immutableTransform(),
+  ],
+  key: 'root',
+  storage: storage,
+  /**
+   * Blacklist state that we do not need/want to persist
+   */
+  blacklist: [
+    // 'auth',
+  ],
+}
+
+export default (rootReducer, rootSaga) => {
+  const middleware = []
+  const enhancers = []
+
+  // Connect the sagas to the redux store
+  const sagaMiddleware = createSagaMiddleware()
+  middleware.push(sagaMiddleware)
+
+  enhancers.push(applyMiddleware(...middleware))
+
+  // Redux persist
+  const persistedReducer = persistReducer(persistConfig, rootReducer)
+
+  const store = createStore(persistedReducer, compose(...enhancers))
+  const persistor = persistStore(store)
+
+  // Kick off the root saga
+  sagaMiddleware.run(rootSaga)
+
+  return { store, persistor }
+}

App/Stores/Example/Actions.js

@@ -0,0 +1,29 @@
+import { createActions } from 'reduxsauce'
+
+/**
+ * We use reduxsauce's `createActions()` helper to easily create redux actions.
+ *
+ * Keys are action names and values are the list of parameters for the given action.
+ *
+ * Action names are turned to SNAKE_CASE into the `Types` variable. This can be used
+ * to listen to actions:
+ *
+ * - to trigger reducers to update the state, for example in App/Stores/Example/Reducers.js
+ * - to trigger sagas, for example in App/Sagas/index.js
+ *
+ * Actions can be dispatched:
+ *
+ * - in React components using `dispatch(...)`, for example in App/App.js
+ * - in sagas using `yield put(...)`, for example in App/Sagas/ExampleSaga.js
+ *
+ * @see https://github.com/infinitered/reduxsauce#createactions
+ */
+const { Types, Creators } = createActions({
+  // Request to fetch the current weather temperature
+  requestWeatherTemperature: null,
+  // Update the current weather temperature (after it was fetched)
+  updateWeatherTemperature: ['temperature'],
+})
+
+export const ExampleTypes = Types
+export default Creators

App/Stores/Example/InitialState.js

@@ -0,0 +1,8 @@
+import { Map } from 'immutable'
+
+/**
+ * The initial values for the redux state.
+ */
+export const INITIAL_STATE = Map({
+  weatherTemperature: null,
+})

App/Stores/Example/README.md

@@ -0,0 +1,3 @@
+This directory contains an example of a store and all its files.
+
+You can safely delete it after removing it from [App/Stores/index.js](../index.js).

App/Stores/Example/Reducers.js

@@ -0,0 +1,18 @@
+import { INITIAL_STATE } from './InitialState'
+import { createReducer } from 'reduxsauce'
+import { ExampleTypes } from './Actions'
+
+/**
+ * Example of a reducer that updates the `temperature` property.
+ */
+export const updateWeatherTemperature = (state, { temperature }) =>
+  state.merge({
+    weatherTemperature: temperature,
+  })
+
+/**
+ * @see https://github.com/infinitered/reduxsauce#createreducer
+ */
+export const reducer = createReducer(INITIAL_STATE, {
+  [ExampleTypes.UPDATE_WEATHER_TEMPERATURE]: updateWeatherTemperature,
+})

App/Stores/README.md

@@ -0,0 +1,17 @@
+[Redux](https://redux.js.org/) is a library that helps managing the application state.
+
+This directory contains redux [actions, reducers and stores](https://redux.js.org/basics).
+
+Here is an example of how to organize those concepts by theme:
+
+```bash
+User/
+    Actions.js # Contains the redux actions for user management
+    InitialState.js # Contains the initial values for the state related to the user
+    Reducers.js # Contains the redux reducers for user management
+Team/
+    Actions.js
+    InitialState.js
+    Reducers.js
+...
+```

App/Stores/index.js

@@ -0,0 +1,16 @@
+import { combineReducers } from 'redux'
+import configureStore from './CreateStore'
+import rootSaga from 'App/Sagas'
+import { reducer as ExampleReducer } from './Example/Reducers'
+
+export default () => {
+  const rootReducer = combineReducers({
+    /**
+     * Register your reducers here.
+     * @see https://redux.js.org/api-reference/combinereducers
+     */
+    example: ExampleReducer,
+  })
+
+  return configureStore(rootReducer, rootSaga)
+}

README.md

@@ -12,6 +12,8 @@ This boilerplate contains:
 
 - [`App/Components`](App/Components): presentational components
 - [`App/Containers`](App/Containers): container components
+- [`App/Stores`](App/Stores): redux [actions, reducers and stores](https://redux.js.org/basics)
+- [`App/Sagas`](App/Sagas): redux sagas
 
 For more information on each directory, click the link and read the directory's README.
 

app.json

@@ -1,4 +1,4 @@
 {
   "name": "Boilerplate",
   "displayName": "Boilerplate"
-}
+}

package.json

@@ -12,8 +12,17 @@
     "rename": "react-native-rename"
   },
   "dependencies": {
+    "immutable": "^3.8.2",
+    "prop-types": "^15.6.1",
     "react": "16.3.1",
-    "react-native": "0.55.4"
+    "react-native": "0.55.4",
+    "react-native-sensitive-info": "^5.1.0",
+    "react-redux": "^5.0.7",
+    "redux": "^3.7.2",
+    "redux-persist": "^5.9.1",
+    "redux-persist-transform-immutable": "^5.0.0",
+    "redux-saga": "^0.16.0",
+    "reduxsauce": "^0.7.0"
   },
   "devDependencies": {
     "babel-jest": "23.2.0",