React Functional Component not rendering - reactjs

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.