Automating Context Creation (Useful but Complex!)

BlogContext.js

import React, { createContext, useState, useReducer } from 'react';
import createDataContext from './createDataContext';

const initialState = [];

const blogReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_BLOGPOST':
      return [...state, { title: `Blog Post #${state.length + 1}` }];

    default:
      return state;
  }
};

// Actions
const addBlogPost = (dispatch) => {
  return () => {
    dispatch({ type: 'ADD_BLOGPOST' });
  };
};

export const { Context, Provider } = createDataContext(
  blogReducer,
  { addBlogPost },
  initialState
);

createDataContext.js

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

export default (reducer, actions, initialState) => {
  const Context = createContext();

  const Provider = (props) => {
    const [state, dispatch] = useReducer(reducer, initialState);

    // actions === { addBlogPost: dispatch => { return () => {}}}
    const boundActions = {};
    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

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

  return { Context, Provider };
};