Chapter 2. Your first Redux application

 

This chapter covers

  • Configuring a Redux store
  • Connecting Redux to React with the react-redux package
  • Using actions and action creators
  • Using reducers to update state
  • Understanding container and presentational React components

By now, you’re almost certainly itching to get started on a Redux application. You have more than enough context to begin, so let’s scratch that itch. This chapter guides you through the set up and development of a simple task-management application using Redux to manage its state.

By the end of the chapter, you’ll have walked through a complete application, but more importantly, you’ll have learned enough of the fundamentals to leave the nest and create simple Redux applications of your own. Through the introduction of components that were strategically omitted in chapter 1, you’ll develop a better understanding of the unidirectional data flow and how each piece of the puzzle contributes to that flow.

You may wonder if introducing Redux is overkill for the small application you’ll build in this chapter. To iterate a point made in chapter 1, we encourage the use of vanilla React until you experience enough pain points to justify bringing in Redux.

2.1. Building a task-management application

2.2. Using Create React App

2.3. Basic React components

2.4. Revisiting the Redux architecture

2.5. Configuring the Redux store

2.6. Connecting Redux and React with react-redux

2.7. Dispatching actions

2.8. Action creators

2.9. Handling actions with reducers

2.10. Exercise

2.11. Solution

Summary