Use State Reducer Hook

Supported Clients

• ApolloClient

Examples

There are a few pieces necessary to property establish I/O with the reducer state.

Initial State

// state.ts
const initialState: any = {
	tracks: [],
	localTrack: undefined
}

export default initialState

// events.ts
export const PUSH_TRACK = 'stream.audio-video.push-track

Actions

// actions.ts
import { PUSH_TRACK } from './events'

export const pushTrack = (track: Track) => (dispatch: any) => {
	dispatch(PUSH_TRACK, track)
}

const actions: any = {
	pushTrack
}

export default actions

Reducers

// reducers.ts
import { PUSH_TRACK } from './events'

export const pushTrack = (state: any, track: any) => {
	return { ...state, tracks: [...state.tracks, track] }
}

const handlers = {
	[Actions.PUSH_TRACK]: pushTrack
}

export default handlers

using the hook in a component, provider, or hook

// Component
import { useApolloClient } from '@apollo/client'
import intialState from './initialState'
import actions from './actions'
import reducers from './reducers'

// client prop is optional
const client: ApolloClient<any> = useApolloClient()

const { state, pushTrack }: any = useStateReducer({
	initialState,
	actions,
	reducers,
	client
})