Introduction to Managing State in React

Managing State in React

As we’ve built up the React page in our app, we’ve been passing properties and handlers up and down the DOM tree to allow our data to be shared between components. This is somewhat complicated and error-prone. We can use a global data store to keep us from having to do all this property passing, all we’ll need to do is make sure each component subscribes to the global store and sends actions to it to change state. React comes with built-in features to support this kind of global data sharing, and it contains hook methods that we can use in our functional components to access this data.

To see how global data can help, we’re going to add a new feature to our concert page that builds up a price subtotal based on the number of tickets the user has on hold and allows the user to clear all tickets from the subtotal section. As currently implemented, this would involve even more passing of data up and down the DOM tree, but we can use contexts and reducers to centralize the data.

Using Reducers

Global data has different problems than local data. In particular, we need to make sure that changes to the global data store happen consistently for all users so that different parts of the application have access to data in the same state.

We’re going to solve our global data problem by refactoring our data using a JavaScript pattern called a reducer and a related structure called a store ...