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?