Search⌘ K
AI Features
Home
Courses
Modern Front-end Development for Rails

Placing the Context

Explore how to create and use React context with TypeScript interfaces, implement the useReducer hook for state management, and provide state and dispatch through context to child components, enabling efficient and scalable state handling in your React applications.

We'll cover the following...

Okay, now for the fun part. Here’s ...

TypeScript 3.3.4
import * as React from "react"
import { Venue } from "./venue"
import {
  TicketData,
  VenueAction,
  VenueState,
  initialState,
  venueReducer,
} from "./venue_reducer"
export interface AppProps {
  concertId: number
  rows: number
  seatsInRow: number
  otherHeldTickets: TicketData[]
}
export interface IsVenueContext {
  state: VenueState
  dispatch: React.Dispatch<VenueAction>
}
export const VenueContext = React.createContext<IsVenueContext>(null)
export const App = (props: AppProps) => {
  const [state, dispatch] = React.useReducer(
    venueReducer,
    initialState(props)
  )
  return (
    <VenueContext.Provider value={{ state, dispatch }}>
      <Venue />
    </VenueContext.Provider>
  )
}

Declarations

Most of this is declarations. We start by importing from React and then importing ...