dreamwalk-react-native-template v0.3.0

Dreamwalk React-Native Template

Build Environements

Dev

• Attached to dev backend, used for local development and pushing to DreamWalk Beta platform for internal builds
• Reads from .env.development env file

UAT

• Attached to UAT backend, used for pushing to DreamWalk Beta platform
• Reads from .env.uat env file

Production

• Attached to Production backend, used for pushing to App Store/Play Store.
• Using clients Apple Developer account/Google Play production keystore
• Reads from .env.production env file

Loading & Error Reducers

This template utilizes loading and error reducers to assist with decluttering your redux stores with loading and error states. To leverage this functionality your redux action types MUST be defined in a strict format: Each action that contains a network call or has the potential to fail will be given a base value, for this example we'll call it EXAMPLE_ACTION

EXAMPLE_ACTION must have 3 accompanying action types created with a different post-fix: _REQUEST to be dispatched when the action creator is first called _SUCCESS to be dispatched after successful completion of async network call or some other function _FAILURE to be dispatched on error.

Here's an example usage of this action types within an async network call

const FOO_BASE = 'FOO'
const FOO_REQUEST = 'FOO_REQUEST'
const FOO_SUCCESS = 'FOO_SUCCESS'
const FOO_FAILURE = 'FOO_FAILURE'

export const foo = () => async (dispatch, getState) => {
  try {
    dispatch({ type: FOO_REQUEST });

    const { data } = await axios.get('/bar');

    dispatch({
      type: FOO_SUCCESS,
      payload: { ...data },
    });
  } catch (error) {
    dispatch({ type: FOO_FAILURE, payload: error });
  }
};

To subscribe to loading and error events for our function we will create selectors on our components to want to listen to this action creator execution. We import our loading and error selector generating functions from LoadingReducer and ErrorReducer respectively.

import React from 'react';
import { View } from 'react-native';

import { createLoadingSelector } from '/path/to/LoadingReducer';
import { createErrorSelector } from '/path/to/ErrorReducer';
import {FOO_BASE} from '/path/to/actions';

const fooLoadingSelector = createLoadingSelector([FOO_BASE])
const fooErrorsSelector = createErrorSelector([FOO_BASE])

const FooBar = ({ navigation, route }) => {
    const loadingFoo = useSelector(state => fooLoadingSelector(state))
    const fooErrors = useSelector(state => fooErrorsSelector(state))
  
    <View>
      {
          ...
      }
    </View>
  );
};

export default FooBar;

Now that we've created selectors to the loading and error states of this function call we can use this to update the UI of the component as necessary. Selectors that are created with createErrorSelector will return errors as an array, and will always return a string value of the error that occured, as such they can be rendered like so:

<View>
  {fooErrors && <Text>fooErrors?.[0]</Text>}
</View>