In the last lesson, you built a simple counter app whose store state was just a single number. Though the counter app illustrates how Redux can manage the state of an application, it isn’t a great example of an application that needs Redux.
Redux really shines when used in applications with many features and a lot of data where having a centralized store to keep it all organized is advantageous. In this lesson, you will learn strategies for managing an application with a more complex store state and, in the process, you will begin to build an app that will grow throughout the rest of this course.
In the browser, you can see the final product. This application, which we will refer to as the “Recipes App”, does the following:
- displays a set of recipes which are pulled from a database.
- allows the user to add/remove their favorite recipes to/from a separate list.
- allows the user to enter a search term to filter the visible recipes.
Now, imagine you are working for the software development company whose main product is this Recipes application. The product manager has determined the desired features and functionality, the graphic designer has defined its style, and the React engineer has created its components. Now it is up to you, the Redux Engineer, to design the state management system that can put it all together!
In reality, the Front-End Engineer would implement both React and Redux.
Before continuing on, make sure that you are familiar with the following terms and concepts relating to React and Redux:
- React
- How to create components
- How to render components using
ReactDOM.render() - How to nest components and pass data through props
- Redux
- One-way data flow model: State → View → Actions → State → View …
- How to create a reducer function:
(state, action) => nextState - How to write action objects and action creators
- How to create a
storeusingcreateStore() - How to use the
storemethodsgetState(),dispatch(), andsubscribe()
Note to learners: The slightly wordy nature of Redux means that the examples in this course can be quite large. It is recommended that you expand the “Learn” section while reading through this lesson’s materials. You can do so by clicking-and-dragging the dividing line that separates the “Learn” section from the code editor.
Instructions
Spend a few moments getting familiar with the features of this application. While you’re at it, consider the following:
- What React components exist in this application?
- What data does each component need from the store?
- What actions occur within this application?
- How do those actions update the store’s state?
Throughout the rest of this course you will be designing the store’s state structure, creating action creators to describe state changes, writing a reducer to execute state changes, and connecting the Redux store to the existing React components. Let’s begin!