Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Show Error Messages based on Non-Optimal States with Recompose

    Tim KindbergTim Kindberg

    Learn how to use the ‘branch’ and ‘renderComponent’ higher-order components to show errors or messaging when your component is in a non-optimal state. Avoid putting extraneous logic to show errors or messaging into your core component by organizing your non-optimal states into custom higher-order components.

    reactReact
    ^16.0.0
    recomposeRecompose
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 I have a withUserData higher-order component that's fetching user data and supplying it to my user list. If there is an error, it'll set the state with an error. If it's successful, it sets the state with the successful user data. Either way, this gets converted to props passed into my user list. I either receive users or error.

    00:22 When everything's fine, it shows the user list as normal, but if I have an error, and the status code is available, I want to show an auth error. If there's no error, but the user length is equal to zero, I want to show a "No users" message.

    00:38 Let's create a new higher-order component. We'll compose together a couple of things. First, we'll use withUserData, and then we'll use branch to render the auth error if the data has an error code.

    00:56 The first parameter is a predicate that returns true or false. The component we want to render is going to be the auth error. Let's implement hasErrorCode.

    01:10 Branch's predicate always gets passed to props, so I'm going to remove this logic and put it here. Then I'll actually destructure error off of the props, and I'll further remove the rest of this logic.

    01:30 Now let's show the "No users" message when the data has no users. We'll call renderComponent and pass it the "No user" message. Let's implement the noUsers predicate. I'll steal this logic right here, and move it over to here, and remove this line completely.

    02:02 You can see our user list has been cleaned up immensely. It's now dealing with happy-path-only scenarios. All of our non-optimal states have been moved out and dealt with separately. Now we have to use our new higher-order component here.

    02:17 We should be able to refresh and still see the same behavior. I can return different responses, such as an unauthenticated error, and see that we're unauthenticated, or I can return an empty array and show a message.

    02:41 If you wanted to go even further, we could refactor this even more. Let's replace this with a custom higher-order component called nonOptimalStates. I'd like to be able to just pass an array of objects. I want to say when hasErrorCode render authError, and when hasNoUsers render the "No users" message.

    03:15 This will come in handy across my application when dealing with all the non-optimal states for all of my components. Now we have to implement that.

    03:23 It's going to take in a state's array, and it's got to return our higher-order component, because that's what compose is looking for. Because I'm going to have multiple calls to branch, I'm going to have to wrap them all in a compose call themselves. I'm actually going to return a composed higher-order component.

    03:48 I want to map over the states array. I'll take each state in, and I'll return a branched higher-order component. The predicate will be the state's when key. I'll render the state's render key. When I map over the states, that will return an array, but compose is expecting ordinal parameters, so I need to spread those in.

    04:16 I should be able to refresh and see the same behavior as before. Again, I can comment out different things, and return either errors, or maybe no users, and it behaves the same.

    Discuss

    Discuss