React Functional Component not rendering

Question

My react native application is showing a blank screen after running it with redux for state management. The HomeScreen functional component could also be failing to render the Flatlist properly.

Maybe I am using the useSelector hook wrongly or the Redux actions aren't correct. The navigation is handled by the react navigation.

       import { 
           GET_CURRENCY,
           GET_CURRENCY_SUCCESS,
           GET_CURRENCY_FAILURE 
       } from "../ActionTypes";
        
        const  myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");
        myHeaders.append("Authorization", "{BearerToken} ");
        
        const requestOptions = {
          method: 'GET',
          headers: myHeaders,
          redirect: 'follow'
        };     
        export const getCurrency = () =>{
            return{
            type: GET_CURRENCY,
        
            }
        }
        export const currencySuccess = instruments => {
            return{
            type: GET_CURRENCY_SUCCESS,
            payload: instruments
        }}
        
        export const currencyFailure = error => {
            return{
            type: GET_CURRENCY_FAILURE,
            payload: 
                error
            }
        } 
          export const  fetchCurrency =() => {
              return dispatch => {
         dispatch(getCurrency())
        
         fetch("https://api-fxpractice.oanda.com/v3/instruments/EUR_USD/candles?price=M", requestOptions)
                 // eslint-disable-next-line no-unused-vars
                 .then(response => response.data)
                 .then(instruments =>{ 
                     dispatch (currencySuccess(instruments))
                    })
                     // eslint-disable-next-line no-undef
                 .catch (error => {
                     const errorMsg = error.message
                    dispatch(currencyFailure(errorMsg))
                 })
            
          }
                
          }
        export default fetchCurrency

    

Homescreen

    import   React, {useEffect} from 'react'
    import { FlatList, ActivityIndicator, View, Text, SafeAreaView} from 'react-native'
    import Instrument from '../../../components/Instrument'
    import styles from './styles'
    import {useSelector, useDispatch} from 'react-redux'
    import  fetchCurrency  from '../../Redux/Actions/currencyActions'
    
     function HomeScreen () { 
      const dispatch = useDispatch()
    
      useEffect(() => {
       dispatch(fetchCurrency())
      }, []);
      const { instruments, loading, error} = useSelector(state => state.reducer
      );
    {error &&
      <View><Text>Error</Text></View>
    }
    {loading && <ActivityIndicator size='large' />}
        return(
          <SafeAreaView
         
          style={styles.container}
        >
           <FlatList
              data={instruments}
              numColumns={1}
              contentContainerStyle = {styles.list}
              keyExtractor  = {({item}) => item.toString() }
              renderItem = {(item, index) => (
                <Instrument currency={item}  />
              )}
    />
    </SafeAreaView>
        );
      }
    
    export default HomeScreen
    
    

reducer

    import {
        GET_CURRENCY,
        GET_CURRENCY_SUCCESS,
        GET_CURRENCY_FAILURE
    
    } from '../ActionTypes'
    
    const initialState = {
        instruments: [],
        loading: false,
        error: null
    }
    
    const reducer = (state= initialState, action) => {
        switch(action.type){
            case GET_CURRENCY:
                return {...state, loading: true}
            case GET_CURRENCY_SUCCESS:
                return {...state, loading: false,  instruments: action.payload.instruments }
            case GET_CURRENCY_FAILURE:
                return { ...state, loading: false, error: action.payload}
            default:
                return state
        }
    
    }
    
        export default reducer;

Answer 1

You need to return the components that you create in the error or loading case.

  if (error) 
    return (<View><Text>Error</Text></View>)
  else if (loading)
    return (<ActivityIndicator size='large' />)
  else 
    return (<SafeAreaView
  ...

The coding pattern

{error &&
      <View><Text>Error</Text></View>
    }

That you have in your code can only be used inside a JSX component to render another component conditionally. For example

<OuterComponent>
  {flag && (<OptionalComponent/>)}
</OuterComponent>

It works because the curly braces in JSX contain regular JavaScript code, and the result of flag && (<OptionalComponent/>) is either false or <OptionalComponent> and for React false simply doesn't generate any output.