module-030-Thunks.md

Thunks

Needs Statement

Thunks are a popular way to avoid directly causing side effects in our actions, action creators, or components, thus allowing us to keep the rest of our application pure (easier to test, reason about, re-use). Thunks are the simplest way to deal with AJAX requests in a redux application.

Objectives

High-Level

• Students will understand the need to isolate side-effects to a particular stage of the redux cycle.
• Students will be able to integrate the redux-thunk libary into a redux application and use it to make AJAX requests.

Low-Level

By completing the workshop, students should be able to:

• explain what middleware are in the context of Redux
• write an example Redux middleware (logger)
• explain what a thunk is, and how it "relocates" effects
• install and configure the redux-thunk library into an existing Redux app
• write "thunked" action creators (or "thunk creators," if you prefer)
• refactor stateful React components use thunked action creators instead
• explain the advantage of using thunks in a React-Redux app

Prework

Pre-reading

• LearnDot Workshop (several pages)
• Article: What is a Thunk - 5 mins
• Gabriel Lebec's Medium articleL: Thunks in Redux - 11 mins

In-class

Instructor Demo

The instructor will demo the use of thunks in a sample application based upon the following codebase and accompanying video lecture:

• thunk codebase
• thunk video demonstration

Exercise

• LearnDot Workshop contains the following:
  • Lab: writing Redux middleware
  • Lab: using thunk middleware in a small app

Solution(s)

• Included as inline text and images of text in the LearnDot workshop