Add a "loading" example

Author: Matthieu Napoli

App/Containers/HomeScreen.js

@@ -16,14 +16,17 @@ class HomeScreen extends React.Component {
   }
 
   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: {this.props.temperature}
-        </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" />
@@ -57,6 +60,7 @@ HomeScreen.propsTypes = {
 const mapStateToProps = (state) => ({
   temperature: state.example.get('temperature'),
   temperatureErrorMessage: state.example.get('temperatureErrorMessage'),
+  temperatureIsLoading: state.example.get('temperatureIsLoading'),
   isHot: isHot(state),
 })
 

App/Sagas/ExampleSaga.js

@@ -8,11 +8,13 @@ import { WeatherService } from 'App/Service/WeatherService'
  * 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)
 
-  // Dispatch a redux action using `put()`
-  // @see https://redux-saga.js.org/docs/basics/DispatchingActions.html
   if (temperature) {
     yield put(ExampleActions.fetchTemperatureSuccess(temperature))
   } else {

App/Stores/Example/Actions.js

@@ -21,6 +21,8 @@ import { createActions } from 'reduxsauce'
 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

App/Stores/Example/InitialState.js

@@ -6,4 +6,5 @@ import { Map } from 'immutable'
 export const INITIAL_STATE = Map({
   temperature: null,
   temperatureErrorMessage: null,
+  temperatureIsLoading: false,
 })

App/Stores/Example/Reducers.js

@@ -1,29 +1,38 @@
+/**
+ * Reducers specify how the application's state changes in response to actions sent to the store.
+ *
+ * @see https://redux.js.org/basics/reducers
+ */
+
 import { INITIAL_STATE } from './InitialState'
 import { createReducer } from 'reduxsauce'
 import { ExampleTypes } from './Actions'
 
-/**
- * Example of a reducer that updates the `temperature` property.
- */
-export const updateTemperature = (state, { temperature }) =>
+export const fetchTemperatureLoading = (state) =>
+  state.merge({
+    temperatureIsLoading: true,
+    temperatureErrorMessage: '',
+  })
+
+export const fetchTemperatureSuccess = (state, { temperature }) =>
   state.merge({
     temperature: temperature,
+    temperatureIsLoading: false,
     temperatureErrorMessage: null,
   })
 
-/**
- * Example of a reducer that updates the `temperatureErrorMessage` property.
- */
-export const showErrorMessage = (state, { errorMessage }) =>
+export const fetchTemperatureFailure = (state, { errorMessage }) =>
   state.merge({
-    temperature: '??',
+    temperature: null,
+    temperatureIsLoading: false,
     temperatureErrorMessage: errorMessage,
   })
 
 /**
  * @see https://github.com/infinitered/reduxsauce#createreducer
  */
 export const reducer = createReducer(INITIAL_STATE, {
-  [ExampleTypes.FETCH_TEMPERATURE_SUCCESS]: updateTemperature,
-  [ExampleTypes.FETCH_TEMPERATURE_FAILURE]: showErrorMessage,
+  [ExampleTypes.FETCH_TEMPERATURE_LOADING]: fetchTemperatureLoading,
+  [ExampleTypes.FETCH_TEMPERATURE_SUCCESS]: fetchTemperatureSuccess,
+  [ExampleTypes.FETCH_TEMPERATURE_FAILURE]: fetchTemperatureFailure,
 })