ReducerAndContext.js

import React, { useContext, useReducer } from 'react';

const AppContext = React.createContext({});

const App = () => {
    let initialState = { lang: 'en', color: 'blue'};
    
    let reducer = (state, action) => {
        switch (action.type) {
            case "change-language":
                return { ...state, lang: action.payload };;
        }
    };

    let [state, dispatch] = useReducer(reducer, initialState);
    let value = { state, dispatch };

    return (
        <AppContext.Provider value={value}>
            <LanguagePicker />
            <Menu />
        </AppContext.Provider>
    );
}

const Menu = () => <MenuItem />;

const LanguagePicker = () => {
    const { state, dispatch } = useContext(AppContext);
    let setLanguage = lang => () => dispatch({ type: "change-language", payload: lang });

    return (
        <div>
            <button onClick={setLanguage('en')}>English</button>
            <button onClick={setLanguage('fr')}>French</button>
        </div>  
    );
}

const MenuItem = () => {
    const { state, dispatch } = useContext(AppContext);
    return (
        <div>
            <p>Theme colour: {state.color}</p>
            <p>Locale: {state.lang}</p>
        </div>   
    );
}

export default App;