Learn React Hooks

Defining the context provider

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 ...