From the course: Building UI Components with Storybook: Master React Components and UI Design with Storybook for Better Efficiency

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Fetching data with component mounting in React and error handling

Fetching data with component mounting in React and error handling

From the course: Building UI Components with Storybook: Master React Components and UI Design with Storybook for Better Efficiency

Start my 1-month free trial Buy for my team

Fetching data with component mounting in React and error handling

“

Patience you have Strong you shall become Storybook you will master. Okay. Welcome back. So We looked at our store. We looked at switching from just a basic from some made-up default Tasks that we were writing in the store, which has no real real-world value to actually fetching from database Of course, there's no API key or anything like that, so it's still pretty basic, but the pattern here is very real and very practical. So we use the fetch library thanks to the power of createAsyncThunk, and then we get the data, we return that data, and in our extra reducers we can check status thanks to AsyncThunk with pending, fulfilled, and rejected. And given those different cases, is we can then use a reducer action payload to update the state tasks to our result, essentially, and then handle what happens in pending or rejected. Very good. Very good. Now that we have this, let's start building out our inbox. Our inbox is a component that's going to handle our composite component, which…

Contents