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.
- 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.
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
- LearnDot Workshop (several pages)
- Article: What is a Thunk - 5 mins
- Gabriel Lebec's Medium articleL: Thunks in Redux - 11 mins
The instructor will demo the use of thunks in a sample application based upon the following codebase and accompanying video lecture:
- LearnDot Workshop contains the following:
- Lab: writing Redux middleware
- Lab: using thunk middleware in a small app
- Included as inline text and images of text in the LearnDot workshop