Redux decorators

2 minutes read

Applies to 1.1.x
State DRAFT

The development experience in the "hypereact" framework is simplified by decorators (a.k.a. code annotations) that can be used to activate behaviors to classes.

The state management related decorators are:

  • ReduxAction: decorates Redux action classes by setting type and slice properties
  • ReduxConnect: decorates React components classes mapping states to props

@ReduxAction

The ReduxAction decorator is used to enable state manager support onto action classes and keep the code clean and maintainable. It accepts two parameters:

  • type: defines the action type that can be used for implementing custom reducers, debugging dispatches and for observing state changes
  • slice: defines the slice key of the root state and reducer that will handle the action when dispatched


// json object matching generic action interface
const ActionObject: IAction = {
  type: "ACTION_TYPE",
  slice: "state_slice"

  // ... other properties
}

// (without decorator) class declaration with explicit type/slice properties
export class ActionClass implements IAction {
  type: string = "ACTION_TYPE";
  slice: string = "state_slice";

  // ... other properties
}

// (with decorator) class declaration with decorated type/slice properties
@ReduxAction("ACTION_TYPE", "state_slice")
export class DecoratedActionClass implements IAction {
  // ... other properties
}

@ReduxConnect

The ReduxConnect decorator is used to bind state slices to React component class props through the "connect" function from React Redux.

It accepts same parameters of the connect function but it is currently limited to:

The decorator is applied to the class constructor, thus the exported class through the module system is the Redux-connected one.

// (with decorator) export the Redux connected class declaration
@ReduxConnect((state: any) => {
  return {
    example: state.example
  };
})
export class App extends React.Component<AppProps> {
}