Remote APIs

Remote APIs

Async Actions

• When you call an asynchronous API, there are two crucial moments in time:
  • The moment you start the call
  • The moment when you receive an answer (or a timeout)
• Usually, for any API request you'll want to dispatch at least three different kinds of actions:
  • An action informing the reducers that the request began.
    • The reducers may handle this action by toggling an isFetching flag in the state. This way the UI knows it's time to show a spinner.
  • An action informing the reducers that the request finished successfully.
    • The reducers may handle this action by merging the new data into the state they manage and resetting isFetching. The UI would hide the spinner, and display the fetched data.
  • An action informing the reducers that the request failed.
    • The reducers may handle this action by resetting isFetching. Additionally, some reducers may want to store the error message so the UI can display it.

Redux Thunk

• By default actions in Redux are dispatched synchronously
• There are two very popular middleware libraries that allow for side effects and asynchronous actions: Redux Thunk and Redux Saga
• Redux Thunk is a middleware that lets you call action creators that return a function instead of an action object.
• That function receives the store’s dispatch method, which is then used to dispatch regular synchronous actions inside the body of the function once the asynchronous operations have completed.

Suspense (alpha/beta)

• It aims to help with handling async operations respectively in regard to CPU power and data fetching
• Suspense allows you to defer rendering part of your application tree until some condition is met (for example, data from an endpoint or a resource is loaded).
• The key module that makes Suspense work is the createFetcher function.

Video

• Dan Abramov on Suspense

Bookmark

• Thunk Middleware