PR review guide

import {
  SomeEnvironmentType,
  SomeEnvironmentEvent
} from '../environment/someEnvironmentEffect'

/*
  Any type used from the environment should be re-exported by the
  feature
*/
export type SomeType = SomeEnvironmentType

/*
  Any types specific to the feature should be exported
*/
export type FeatureType = any

/*
  If multiple states share values, define it as BaseState
*/
type BaseState = {}

/*
   Define any context that immediately transitions to
   an other context. This context is not consumable
   from the outside of the feature. Define it as
   TransientContext
*/  
export type TransientState = {
  state: 'TRANSIENT_STATE'
}

/*
  Define the context with its explicit states and
  any combination with base context. Define it as Context
*/
export type State =
  | {
    state: 'STATE_A'
  }
  | {
    state: 'STATE_B'
    someValue: any
  }
  | (
    BaseState & (
      | {
        state: 'STATE_C'
      }
      | {
        state: 'STATE_D'
      }
    )
  )

/*
  Define actions that can be triggered by any component
  consuming this feature. Define it as PublicAction
*/
export type PublicAction = {
  type: 'Action'
}

export type PrivateAction = EnvironmentAction | OtherEnvironmentAction

/*
  The Action type is a combination of any Public and
  Private actions
*/
export type Action = PublicAction | PrivateAction

/*
  Export the hook. Define it as useFeature
*/
export const useFeature = createHook(Context)

/*
  Create the reducer using the Context, Event and optionally
  TransientContext types. Define it as reducer
*/
const reducer = createReducer<State, Action, TransientState>({})

interface FeatureProps {
 // Should be optional
 initialState?: State;
 // Other props can be added here too
 }

/*
  Create the feature component. It can have any
  props passed to it, but initialState and children
  is required. Define it as Feature.
*/
export const Feature: React.FC<FeatureProps> = ({
  initialState,
  children
}) => {
  const feature = useReducer(reducer, initialState | { state: 'STATE_A' })
  
  return (
    <Context.provider value={feature}>
      {children}
    </Context.Provider>
    )
}

Last updated

Was this helpful?