We can use React's
useReducer hook to manage our application data. In this example we'll look at a small To-Do list app that manages its data with
useReducer doesn't enforce any particular types/shapes for states and actions, there are a few that are common when managing medium/large quantities of data:
- The actions we pass to the reducer are objects containing a
- We often define constants for the
type, enumerating every action our reducer function knows how to handle
- We expose
actionCreatorfunctions that abstract the details of our action objects from the rest of the app
- Our state is an object, so that we can add fields to it easily as our app grows
These patterns help keep the reducer code self-contained for each kind of entity in our app (e.g todos, posts, photos).
Using the terminology from the Project Structure section, this app contains:
- A "container" component,
App, that connects our application/business logic for adding and removing To-Do items with our UI components
- 3 "presentational" components that we use to display our UI:
todosfile that contains the initial state of our app and a reducer function for updating the state
Want to learn React Native in-depth?