Skeleton for MovieContext

MoviesContext.js

/**
initialMovies = [
  {
    id: uuidv4(),
    title: 'The Godfather',
    year: 1972,
    watched: false,
  },
  {
    id: uuidv4(),
    title: 'Inception',
    year: 2010,
    watched: false,
  },
  ...
]
*/
import { initialMovies } from './initialState';

// Create a context with by calling React.createContext()
const MoviesContext = React.createContext();
 
// initial reducer
const moviesReducer = (state, action) => {
  return state;
};

/**
state can contain more such as a loading status, and error state. e.g.
{
  status: 'loading',
  movies: [],
  error: null,
}
*/
const initialState = {
  movies: initialMovies,
};
 
// Create a custom MoviesProvider for the context
export const MoviesProvider = props => {
  const [state, dispatch] = React.useReducer(moviesReducer, initialState);
  
  // useMemo to optimize the context value
  const value = React.useMemo(() => ({ state, dispatch }), [state]);

  return <MoviesContext.Provider value={value} {...props} />;
};

// Custom hook useMoviesContext
export const useMoviesContext = () => {
  const context = React.useContext(MoviesContext);

  if (!context) {
    throw new Error('useMoviesContext must be used inside a MoviesProvider');
  }

  const { state, dispatch } = context;
  const { movies } = state;

  return { movies };
};