Skip to content

Instantly share code, notes, and snippets.

@glebec

glebec/module-030-Thunks.md

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.
Download ZIP

Revisions

  1. glebec revised this gist Jul 10, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions module-030-Thunks.md
    View file
    Original file line number Diff line number Diff line change
    @@ -43,8 +43,8 @@ The instructor will demo the use of thunks in a sample application based upon th

    - [LearnDot Workshop](https://learn.fullstackacademy.com/workshop/5d1f8982fa4db900045d3b1f/landing) contains the following:
    - Lab: writing Redux middleware
    - Lab: implementing thunk middleware
    - Lab: using thunk middleware in a small app

    ## Solution(s)

    - TBD
    - Included as inline text and images of text in the LearnDot workshop
  2. glebec revised this gist Jul 9, 2019. 1 changed file with 14 additions and 11 deletions.
    25 changes: 14 additions & 11 deletions module-030-Thunks.md
    View file
    Original file line number Diff line number Diff line change
    @@ -25,23 +25,26 @@ By completing the workshop, students should be able to:
    ## Prework

    ### Pre-reading
    - [What is a thunk - 5 mins](https://daveceddia.com/what-is-a-thunk/)
    - [Gabriel Lebec's Medium article - 11 mins](https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60)

    - [LearnDot Workshop (several pages)](https://learn.fullstackacademy.com/workshop/5d1f8982fa4db900045d3b1f/content/5d20bc3baab7cc0004c442b0/text)
    - [Article: What is a Thunk - 5 mins](https://daveceddia.com/what-is-a-thunk/)
    - [Gabriel Lebec's Medium articleL: Thunks in Redux - 11 mins](https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60)

    ## In-class

    ### Tutorial
    It seems that students have not yet covered redux middleware in any previous module, which is a prerequisite for learning about thunks.
    - [Learndot: Lab - Redux Middleware](https://learn.fullstackacademy.com/workshop/5a9058a9ba75f300049f97c2/landing)
    - [starting point](https://github.com/FullstackAcademy/Lab.ReduxBank/tree/solution)

    ### 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](https://github.com/FullstackAcademy/1806-GH-NY/tree/master/01-junior/24-react-redux/movie-thunk)
    - [thunk video demonstration](https://www.youtube.com/watch?v=8wGDsZoPV3Y)

    ### Tutorial
    - [Learndot: Lab - Thunk Middleware](https://learn.fullstackacademy.com/workshop/5ab17c6313abf90004cc71f7/landing)
    - [starting point](https://github.com/FullstackAcademy/Lab.Thunk)
    - [solution](https://github.com/FullstackAcademy/Lab.Thunk/tree/solution)
    ### Exercise

    - [LearnDot Workshop](https://learn.fullstackacademy.com/workshop/5d1f8982fa4db900045d3b1f/landing) contains the following:
    - Lab: writing Redux middleware
    - Lab: implementing thunk middleware

    ## Solution(s)

    - TBD
  3. glebec revised this gist Jul 9, 2019. 1 changed file with 16 additions and 11 deletions.
    27 changes: 16 additions & 11 deletions module-030-Thunks.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,17 +5,22 @@ Thunks are a popular way to avoid directly causing side effects in our actions,

    ## 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
    ### 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

  4. glebec revised this gist Jul 9, 2019. 1 changed file with 13 additions and 3 deletions.
    16 changes: 13 additions & 3 deletions module-030-Thunks.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,9 +3,19 @@
    ## 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.

    ## Objective
    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.
    ## 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

  5. @johnptmcdonald johnptmcdonald revised this gist Apr 12, 2019. 1 changed file with 4 additions and 5 deletions.
    9 changes: 4 additions & 5 deletions module-030-Thunks.md
    View file
    Original file line number Diff line number Diff line change
    @@ -13,14 +13,13 @@ Students will be able to integrate the `redux-thunk` libary into a redux applica
    - [What is a thunk - 5 mins](https://daveceddia.com/what-is-a-thunk/)
    - [Gabriel Lebec's Medium article - 11 mins](https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60)

    ### Pre-tutorial
    ## In-class

    It seems that students have not yet covered redux middleware in any previous module, which should be a prerequisite for learning about thunks. If this is correct, students should cover this in the pre-tutorial:
    ### Tutorial
    It seems that students have not yet covered redux middleware in any previous module, which is a prerequisite for learning about thunks.
    - [Learndot: Lab - Redux Middleware](https://learn.fullstackacademy.com/workshop/5a9058a9ba75f300049f97c2/landing)
    - [starting point](https://github.com/FullstackAcademy/Lab.ReduxBank/tree/solution)

    ## 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](https://github.com/FullstackAcademy/1806-GH-NY/tree/master/01-junior/24-react-redux/movie-thunk)
  6. @johnptmcdonald johnptmcdonald revised this gist Apr 9, 2019. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions module-030-Thunks.md
    View file
    Original file line number Diff line number Diff line change
    @@ -15,9 +15,9 @@ Students will be able to integrate the `redux-thunk` libary into a redux applica

    ### Pre-tutorial

    - It seems that students have not yet covered redux middleware in any previous module, which should be a prerequisite for learning about thunks. If this is correct, students should cover this in the pre-tutorial:
    - [Learndot: Lab - Redux Middleware](https://learn.fullstackacademy.com/workshop/5a9058a9ba75f300049f97c2/landing)
    - [starting point](https://github.com/FullstackAcademy/Lab.ReduxBank/tree/solution)
    It seems that students have not yet covered redux middleware in any previous module, which should be a prerequisite for learning about thunks. If this is correct, students should cover this in the pre-tutorial:
    - [Learndot: Lab - Redux Middleware](https://learn.fullstackacademy.com/workshop/5a9058a9ba75f300049f97c2/landing)
    - [starting point](https://github.com/FullstackAcademy/Lab.ReduxBank/tree/solution)

    ## In-class

  7. @johnptmcdonald johnptmcdonald revised this gist Apr 9, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion module-030-Thunks.md
    View file
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,7 @@ Students will be able to integrate the `redux-thunk` libary into a redux applica

    - It seems that students have not yet covered redux middleware in any previous module, which should be a prerequisite for learning about thunks. If this is correct, students should cover this in the pre-tutorial:
    - [Learndot: Lab - Redux Middleware](https://learn.fullstackacademy.com/workshop/5a9058a9ba75f300049f97c2/landing)
    - [starting point](https://github.com/FullstackAcademy/Lab.ReduxBank/tree/solution)
    - [starting point](https://github.com/FullstackAcademy/Lab.ReduxBank/tree/solution)

    ## In-class

  8. @johnptmcdonald johnptmcdonald created this gist Apr 9, 2019.
    33 changes: 33 additions & 0 deletions module-030-Thunks.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    # 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.

    ## Objective
    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.

    ## Prework

    ### Pre-reading
    - [What is a thunk - 5 mins](https://daveceddia.com/what-is-a-thunk/)
    - [Gabriel Lebec's Medium article - 11 mins](https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60)

    ### Pre-tutorial

    - It seems that students have not yet covered redux middleware in any previous module, which should be a prerequisite for learning about thunks. If this is correct, students should cover this in the pre-tutorial:
    - [Learndot: Lab - Redux Middleware](https://learn.fullstackacademy.com/workshop/5a9058a9ba75f300049f97c2/landing)
    - [starting point](https://github.com/FullstackAcademy/Lab.ReduxBank/tree/solution)

    ## 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](https://github.com/FullstackAcademy/1806-GH-NY/tree/master/01-junior/24-react-redux/movie-thunk)
    - [thunk video demonstration](https://www.youtube.com/watch?v=8wGDsZoPV3Y)

    ### Tutorial
    - [Learndot: Lab - Thunk Middleware](https://learn.fullstackacademy.com/workshop/5ab17c6313abf90004cc71f7/landing)
    - [starting point](https://github.com/FullstackAcademy/Lab.Thunk)
    - [solution](https://github.com/FullstackAcademy/Lab.Thunk/tree/solution)