Merge branch 'redux' into 'master'

Add redux and redux-saga with documentation and an example

Closes #4 and #5

See merge request tcm-projects/react-native-boilerplate!6

Author: aum-tcm

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,35 @@
 import React from 'react'
-import { Platform, StyleSheet, Text, View } from 'react-native'
+import { Platform, StyleSheet, Text, View, Button } from 'react-native'
+import { connect } from 'react-redux'
+import { PropTypes } from 'prop-types'
+import ExampleActions from 'App/Stores/Example/Actions'
+import { isHot } from 'App/Stores/Example/Selectors'
 
 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.fetchTemperature()
+  }
+
   render() {
+    let temperature = this.props.temperatureIsLoading ? '...' : this.props.temperature
+    if (temperature === null) {
+      temperature = '??'
+    }
+
     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: {temperature}</Text>
+        <Text style={styles.instructions}>{this.props.isHot ? "It's pretty hot!" : ''}</Text>
+        <Text style={styles.instructions}>{this.props.temperatureErrorMessage}</Text>
+        <Button onPress={this.props.fetchTemperature} title="Refresh" />
       </View>
     )
   }
@@ -34,3 +51,24 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
 })
+
+HomeScreen.propsTypes = {
+  temperature: PropTypes.number,
+  temperatureErrorMessage: PropTypes.string,
+}
+
+const mapStateToProps = (state) => ({
+  temperature: state.example.get('temperature'),
+  temperatureErrorMessage: state.example.get('temperatureErrorMessage'),
+  temperatureIsLoading: state.example.get('temperatureIsLoading'),
+  isHot: isHot(state),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  fetchTemperature: () => dispatch(ExampleActions.fetchTemperature()),
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(HomeScreen)

App/Sagas/ExampleSaga.js

@@ -0,0 +1,25 @@
+import { put, call } from 'redux-saga/effects'
+import ExampleActions from 'App/Stores/Example/Actions'
+import { WeatherService } from 'App/Service/WeatherService'
+
+/**
+ * A saga can contain multiple functions.
+ *
+ * This example saga contains only one to fetch the weather temperature.
+ */
+export function* fetchTemperature() {
+  // Dispatch a redux action using `put()`
+  // @see https://redux-saga.js.org/docs/basics/DispatchingActions.html
+  yield put(ExampleActions.fetchTemperatureLoading())
+
+  // Fetch the temperature from an API
+  const temperature = yield call(WeatherService.fetchTemperature)
+
+  if (temperature) {
+    yield put(ExampleActions.fetchTemperatureSuccess(temperature))
+  } else {
+    yield put(
+      ExampleActions.fetchTemperatureFailure('There was an error while fetching the 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 { fetchTemperature } from './ExampleSaga'
+
+export default function* root() {
+  yield [
+    /**
+     * @see https://redux-saga.js.org/docs/basics/UsingSagaHelpers.html
+     */
+    // Call `fetchTemperature()` when a `FETCH_TEMPERATURE` action is triggered
+    takeLatest(ExampleTypes.FETCH_TEMPERATURE, fetchTemperature),
+  ]
+}

App/Service/README.md

@@ -0,0 +1 @@
+This directory contains services that are meant to connect the application to other APIs, for example

App/Service/WeatherService.js

@@ -0,0 +1,35 @@
+import { create } from 'apisauce'
+
+const weatherApiClient = create({
+  baseURL: 'https://query.yahooapis.com/v1/public/',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+  timeout: 3000,
+})
+
+function fetchTemperature() {
+  // Simulate an error 50% of the time just for testing purposes
+  if (Math.random() > 0.5) {
+    return new Promise(function(resolve, reject) {
+      resolve(null)
+    })
+  }
+
+  const locationQuery = escape(
+    "select item.condition.temp from weather.forecast where woeid in (select woeid from geo.places where text='Lyon, Rhone-Alpes, FR') and u='c'"
+  )
+
+  return weatherApiClient.get('yql?q=' + locationQuery + '&format=json').then((response) => {
+    if (response.ok) {
+      return response.data.query.results.channel.item.condition.temp
+    }
+
+    return null
+  })
+}
+
+export const WeatherService = {
+  fetchTemperature,
+}

App/Stores/CreateStore.js

@@ -0,0 +1,55 @@
+import { applyMiddleware, compose, createStore } from 'redux'
+import createSagaMiddleware from 'redux-saga'
+import { persistReducer, persistStore } from 'redux-persist'
+import immutableTransform from 'redux-persist-transform-immutable'
+
+/**
+ * This import defaults to localStorage for web and AsyncStorage for react-native.
+ *
+ * Kind in mind this storage *is not secure*. Do not use it to store sensitive information
+ * (like API tokens, private and sensitive data, etc.).
+ *
+ * If you need to store sensitive information, use redux-persist-sensitive-storage.
+ * @see https://github.com/CodingZeal/redux-persist-sensitive-storage
+ */
+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,33 @@
+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({
+  // Fetch the current weather temperature
+  fetchTemperature: null,
+  // The operation has started and is loading
+  fetchTemperatureLoading: null,
+  // The temperature was successfully fetched
+  fetchTemperatureSuccess: ['temperature'],
+  // An error occurred
+  fetchTemperatureFailure: ['errorMessage'],
+})
+
+export const ExampleTypes = Types
+export default Creators

App/Stores/Example/InitialState.js

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