Creating a Context for a global state
Based on the React Context behavior, we will discuss two solutions regarding using Context with a global state, as follows:
- Creating small state pieces
- Creating one state with
useReducerand propagating with multiple Contexts
Let's take a look at each solution.
Creating small state pieces
The first solution is to split a global state into pieces. So, instead of using a big combined object, create a global state and a Context for each piece.
The following example creates two count states, with a Context and a provider component for each count state.
Firstly, we define two Contexts, Count1Context and Count2Context, one for each piece, as follows:
type CountContextType = [
number,
Dispatch<SetStateAction<number>>
];
const Count1Context = createContext<CountContextType>([
0,
() => {}
]);
const Count2Context = createContext<CountContextType...