Using prop drilling
In this first state management approach, we will store the user
, permissions
, and loading
state in the App
component. The App
component will then pass this state to the Header
and Main
components using props.
So, this approach uses React features that we are already aware of. The approach is referred to as prop drilling because the state is passed down the component tree using props.
Carry out the following steps to rework the App
component to store the user
, permissions
, and loading
state, and pass this state down to the Header
and Main
components:
- Open
App.tsx
and start by removing all the existing code and adding the following import statements:import { useReducer } from 'react';
import { Header } from './Header';
import { Main } from './Main';
import { authenticate, User } from './api/authenticate';
import { authorize } from './api/authorize';
We have imported useReducer
from React to store the...