8 Using the Redux data architecture library

 

This chapter covers

  • How the React context API works
  • Creating a Redux store
  • How to use Redux actions and reducers to manage global state
  • Reducer composition using combineReducers

When building React and React Native applications in the real world, you’ll quickly learn that the data layer can become complex and unmanageable if it isn’t handled very precisely and deliberately. One way to handle data is to keep it in component state and pass it around as props, as we’ve done throughout this book. Another way is to use a data architecture pattern or library. This chapter covers the Redux library: it’s the most widely adopted method of handling data in the React ecosystem, and it’s maintained by Facebook, the same team that maintains both React and React Native.

8.1 What is Redux?

In the Redux documentation, the library is described as “a predictable state container for JavaScript apps.” Redux is basically a global state object that’s the single source of truth in an application. This global state object is received as props into React Native components. Any time a piece of data is changed in the Redux state, the entire application receives this new data as props.

8.2 Using context to create and manage global state in a React application

8.3 Implementing Redux with a React Native app

8.4 Creating Redux reducers to hold Redux state

8.5 Adding the provider and creating the store

8.6 Accessing data using the connect function

8.7 Adding actions

8.8 Deleting items from a Redux store in a reducer

Summary