reactjs - Context Provider in TypeScript

Question

I got the simplest context provider working on ES6 but I am unable to transform it for use on a TypeScript project. Every website I search for has a completely different take on implementing context api.

It is just a boolean variable and a function to set it, I keep running into problems with TypeScript.

Do I need to change the entire approach to make it work on TypeScript?

context.js

import React from 'react'
import Reducer from './reducer'

export const LoadContext = React.createContext()

export const LoadProvider = ({ children }) => {
  const [state, dispatch] = React.useReducer(Reducer, {
    load: true
  })

  const setLoad = (load) => dispatch({ type: 'set_load', load })

  return (
    <LoadContext.Provider value={{ load: state.load, setLoad }}>
      {children}
    </LoadContext.Provider>
  )
}

export const useLoadContext = () => React.useContext(LoadContext)

reducer.js

export default (state, action) => {
  switch (action.type) {
    case 'set_load':
      return {
        load: action.load
      }
    default:
      return state
  }
}

question from:https://stackoverflow.com/questions/65889422/context-provider-in-typescript

Answer 1

Generally you would want to type your context, eg.:

type LoadContextType = {
  load: any // Not sure what these are, type it appropriately
  setLoad: any
}

const context LoadContext = React.CreateContext<LoadContextType>(null)

So when using either the provider or the consumer of LoadContext the types are known.