Using context for global state

After learning how to use React context to implement themes in our blog app, we are now going to use a context to avoid having to manually pass down the state and dispatch props for our global app state.

Defining StateContext

We start by defining the context in our src/contexts.js file.

In src/contexts.js, we define the StateContext, which is going to store the state value and the dispatch function:

export const StateContext = React.createContext({
    state: {},
    dispatch: () => {}
})

We initialized the state value as an empty object, and the dispatch function as an empty function, which will be used when no provider is defined.

...