Now, we are going to define the context provider in our src/App.js file, which is going to get the values from the existing Reducer Hook.

Let's define the context provider for global state now:

1. In src/App.js, import the StateContext by adjusting the existing import statement:

import { ThemeContext, StateContext } from './contexts'

2. Then, we define a new context provider, by returning it from our App function:

    return (
        <StateContext.Provider value={{ state, dispatch }}>
            <ThemeContext.Provider value={theme}>
                ...
            </ThemeContext.Provider>
        </StateContext.Provider>
    )

Now, our context provider provides the state object and the dispatch function to the rest of our app, and we can move on to consuming the context value.