DEV Community

Discussion on: Sharing state like Redux with React's Context API

Collapse
rohanfaiyazkhan profile image
Rohan Faiyaz Khan Author

Hi! You are right in spotting that useReducer returns state and dispatch. useContext returns the context value provided by the Provider component. However in my App component I actually used the useReducer as the value for Provider.

function App() {
    const useAuthState = useReducer(authReducer, initialAuthState);
    return (
        <Provider value={useAuthState}>
            <Router />
        </Provider>
    );
}

As a result, the state returned by useContext inside the Provider's children is actually useReducer's output, i.e. state and dispatch. This allows us to call dispatch from the child components.

Hope this helps!