Skip to content

Instantly share code, notes, and snippets.

@obiwanjacobi
Last active April 16, 2018 06:08
Show Gist options
  • Save obiwanjacobi/1a79f0cc4998ffe3bdc0c519aea29ee0 to your computer and use it in GitHub Desktop.
Save obiwanjacobi/1a79f0cc4998ffe3bdc0c519aea29ee0 to your computer and use it in GitHub Desktop.
TypeScript React-Redux connected Component Template
import * as React from "react";
import { Dispatch } from "redux";
import { connect, MapDispatchToPropsFunction, MapStateToProps } from "react-redux";
import { MyApplicationState, SomeSubStateType } from "./MyApplication";
import { Action1, createAction1Action } from "./Action1";
import { Action2, createAction2Action } from "./Action2";
import { Action3, createAction3Action } from "./Action3";
[import { Event1, Event2, Event3 } from "./Events";]
export interface MyComponentProps {}
export interface MyComponentStoreProps {}
export interface MyComponentState {}
export type MyComponentActions = Action1 & Action2 & Action3;
[export type MyComponentEvents = Event1 & Event2 & Event3;]
export type MyComponentAllProps = MyComponentProps & MyComponentStoreProps & MyComponentActions [& MyComponentEvents];
[export] class MyComponent extends React.Component<MyComponentAllProps, MyComponentState> {
public constructor(props: MyComponentAllProps) {
super(props);
this.state = {};
}
public render() {
return (
<div/>
);
}
protected get actions(): Readonly<MyComponentActions> {
return this.props;
}
}
type ExtractStorePropFunc = MapStateToProps<MyComponentStoreProps, MyComponentProps, MyApplicationState>;
const extractComponentPropsFromStore: ExtractStorePropFunc = (
state: MyApplicationState, _: MyComponentProps): MyComponentStoreProps => {
return { ... };
};
type ActionDispatchFunc = MapDispatchToPropsFunction<MyComponentActions, MyComponentProps>;
const createActionObject: ActionDispatchFunc =
(dispatch: Dispatch<MyApplicationState>, _: MyComponentProps): MyComponentActions => {
return {
action1: (): void => {
dispatch(createAction1Action());
},
action2: (param1: {}): void => {
createAction2Action(dispatch, param1);
},
action3: (param1: Partial<SomeSubStateType>): void => {
dispatch(createAction3Action(param1));
},
};
};
export [default] connect(extractComponentPropsFromStore, createActionObject)(MyComponent);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment