budget-demo/src/data/context/BudgetContext.jsx

import { useReducer, createContext } from 'react';
import BudgetReducer from './BudgetReducer';

const BudgetContext = createContext();

const BudgetState = (props) => {
    const initialState = {
        budgetPeriods: []
    },
    [state, dispatch] = useReducer(BudgetReducer, initialState),
    api = {
        loadData: (data) => {
            dispatch({ type: 'budget/populate', data });
        },
        updateBillPaid: (periodId, billId) => {
            dispatch({ type: 'budget/period/bills/update', data: { periodId, billId }});
        }
    };

    return (
        <BudgetContext.Provider value={{...state, api}}>
            {props.children}
        </BudgetContext.Provider>
    );
};

export { BudgetState, BudgetContext };