Skip to content

Instantly share code, notes, and snippets.

@glebec
Forked from johnptmcdonald/module-030-Thunks.md
Last active July 10, 2019 00:46
Show Gist options
  • Save glebec/51a4cecabf0bb7d15f8fe8f5946263b4 to your computer and use it in GitHub Desktop.
Save glebec/51a4cecabf0bb7d15f8fe8f5946263b4 to your computer and use it in GitHub Desktop.

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

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:

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment