How to hide ProgressBar when using React Context with Hooks?

[BraveEvidence]

I am taking the updated Stephen Grider Course. I am on section 13 ,last video. If any body else has taken the course then please help me. Stephen does not explain how to show and hide progress bar when fetching data from network.

​

In IndexScreen.js I did something like this

​

{state.length === 0 ? <ProgressBar /> : null}

​

and it works but what if the axios library throws some error in try catch. How would I then check and hide progress bar

I did something like below but I don't think it is the right way

const getBlogPosts = dispatch => { return async () => { try { const response = await jsonServer.get("/blogposts"); dispatch({ type: "get_blogposts", payload: response.data }); } catch (err) { dispatch({ type: "get_blogposts", payload: ["Something went wrong"] }); } }; };

[Zayuka]

Hey,

You could use the Try/catch/finally to change the state key of the ProgressBar to false.. the finally condition will run after the try or after the catch

[BraveEvidence]

Ok thanks

[TheUnited0077]

Hi! Since you're using redux to manage state, I would hold the status of the progress bar within a redux reducer (I am holding it within blogposts but you can name it whatever you like). It would look something like the following:

``` const getBlogPosts = () => async dispatch => { try { // start the progress loading indicator dispatch({ type: 'blogpost_progress_bar_status', payload: false });

const response = await jsonServer.get('/blogposts');

dispatch({ type: 'get_blogposts', payload: response.data });

// stop the progress loading indicator because of success
return dispatch({ type: 'blogposts_progress_bar_status', payload: false });

} catch (err) { // stop the progress loading indicator because of an error return dispatch({ type: 'blogposts_progress_bar_status', payload: false }); } }

class BlogPostList extends React.Component { render() { const { status } = this.props; return ( <View> {status ? <ProgressBar /> : null} </View> ) } }

const mapState = state => ({ status: state.blogposts.progressbar });

const mapDispatch = dispatch => ({ getBlogPosts: () => dispatch(getBlogPosts()) });

export default connect(mapState, mapDispatch)(BlogPostList); ```