Lecture 5 explores asynchronous actions and more specifically, interactions with a remote server. Focus is on testability and maintainability and a few new tools from React's arsenal are put into use.
The core ideas of reducer de-composition and middlewares borrow heavily from Redux.
- What three actions must be dispatched during an asynchronous process?
- What is a Promise in JavaScript?
- How to avoid leaking Promise handlers when the component is unmounted?
- When to use local state and when to incorporate state in reducer state?
See CommentListWithServer
server.getComments
and CommentFormWithServer
server.postComment
for answers.
See how a component using asynchronous actions can be tested in CommentFormWithServerTest.
- What can the
fetch
API be used for? - What does
fetch
return? - What is an "async" function JavaScript?
- What does the
await
keyword do in JavaScript?
See Server API for answers.
A toy server has been added to the project. The server has simulated latency and intermittently fails to retrieve comments to simulate problems that can occur in real environments. The server accepts comments under POST /comments with JSON content type. Comments can be fetched using GET /comments. Comments can be deleted using DELETE /comments/:comment_id.
- What is a "context" in React
- When to use a "context" and when to pass props?
- How can pure functions be de-composed?
- What to pay attention to when de-composing reducers?
See Comments.js.
- When and why to use custom React hooks?
- How to name custom React hooks?
See UseServerBasedOnParams for answers.
- What can be done from a dispatch middleware?
- What is the interface of a dispatch middleware (a la Redux)?
See UseReducerWithMiddleware, App.js and LoggingMiddleware for answers.