export interface UserActions extends Action { type: UserKind; payload: UserPayload; }
..TypeScript will raise an error on combineReducers:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_dqPm-IOHYLPwRzUekMzErjssBqLTa4K6GInrvr15WwrSJAHknBnCFanAHyqJ6TtrWl2RdAwLWioRMIvwHpObryd4Gip9RJ6oFpVHgmz4WBSb1PbNMokQY0Aj5wkGaAXJujuLdODRNKFT/s1600/Screen+Shot+2017-07-31+at+7.38.29+PM.png)
To fix the compilation error, make the Redux action property be optional:
export interface UserActions extends Action { type: UserKind; payload?: UserPayload; }
Result:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6lhdhXkuVH_lThyphenhyphenN41ASvOUbI9_K_JAHkMvXIIV0PBgGyWZCqrnqi0xoLam5hYYho7kskXDNBfugCowjWzsAqueRnrlYAT2OikmufOT4n2eyKmfQbPwk2LB6xxCfNlkGVVruH9X903LOz/s1600/Screen+Shot+2017-07-31+at+7.05.38+PM.png)
However, TypeScript won't be able to catch missed properties, it won't raise an error that we didn't pass the payload property on User 6:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ARvbNZVFYdr0jKVlkc2F29ybqJnnCJp0zPg4AJAsDJNkYJBP1W5NBhW8CNbfO36i9hbjbtTc1w1VaTrxo-1eddwQRkL7Tdqku-YkQbnF0Wd3sLo5_CRxUKG6zQhj9Wg-ilS10HJ91PJy/s1600/Screen+Shot+2017-07-31+at+7.08.20+PM.png)
To fix that, remove the optional indicator on Redux action:
export interface UserActions extends Action { type: UserKind; payload: UserPayload; }
Result, TypeScript is now able to catch missed properties:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZEwmt8AlWAl8RPO0SVd34QnXkEFuTIo2csXTzpKpNDT4wIBbW_xcYPug6DtHM0qPgFm-Gq-Jlr4PTnoRDk1XaY1yAI-_H-n5mk31uwv4zegzTO4nbmYn_wyR-40wHxGr85wsXco_JQWqa/s1600/Screen+Shot+2017-07-31+at+7.11.24+PM.png)
However, we are back to this error on combineReducers:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqsgb_OudtOWnvdDUAgFCcyT0PzthUnCzkEDkiGiiVOG3-8x_eAVv1kBzMW_VCc3Zp1QbAaJE5oGwVycmukNv8aAD7lJaYySq5Ga1pDAaZiinboNYnFfgAeR8g58nr2JriLqQnUQlWgph3/s1600/Screen+Shot+2017-07-31+at+7.01.43+PM.png)
To comply with combineReducers requirement of Reducer actions containing just a type property only, create another interface that has optional properties (e.g., payload), and use that for the Redux reducer's action parameter (UserActionsNoPayload). And then on UserActions, inherit UserActionsNoPayload from UserActions:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix0loBJbWUKZdQcsxCfuct1y5w8GoFWeaDofUcPvwDyPvdNIA6DcJs6-8Gy15Ik9o4wKew1DeBYosQkek7klzTyLkcRl4u1s9NrUNTCh8VyNXWBwJ5rXDjO_81cLt8Qge5sXBXlHo1Grxw/s1600/Screen+Shot+2017-07-31+at+7.19.44+PM.png)
Now, no more combineReducers compilation error, and the compiler is still able to catch missed properties:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeeuQxEauzPFR0gD4iLLa4USJws-6upH6204SK27m0d8aw5iAhcx0ZammhZV4yJMf5PWmRey_JVkQd9YT8k8hKhOGp-PK20g_zNgzdEeAKuG4a9xjALetRTMEg9e9sH45wcydWpyBohsNM/s1600/Screen+Shot+2017-07-31+at+7.21.49+PM.png)
Here are the TypeScript definitions for the routeToUser:
export interface StateProps { user: Dto.Client.User; component: Component; counter: Dto.Client.Counter; } export interface ActionProps { routeToUser: UserDispatcher; doCounter: CounterDispatcher; } interface Props extends StateProps, ActionProps { } export type Dispatcher = (action: UserActions | CounterActions) => void; export type UserDispatcher = (action: UserActions) => void; export type CounterDispatcher = (action: CounterActions) => void; export default class ReduxFirstRouterApp extends React.Component<Props, {}> {
And here is how are the states and dispatchers are mapped as properties to a component via Redux's connect:
const mapStateToProps = ({user, component, counter}: StateProps) => ({user, component, counter}); const mapDispatchToProps = (dispatch: Dispatcher): ActionProps => ({ routeToUser: (action: UserActions) => dispatch(action), doCounter: (action: CounterActions) => dispatch(action) }); this.AppContainer = connect(mapStateToProps, mapDispatchToProps)(ReduxFirstRouterApp);
Happy Coding!
P.S.
At first, I tried creating UserActions with complete properties, and then made UserActionsNoPayload inherits UserActions and define payload as optional on UserActionsNoPayload; however, it's a compiler error:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0TRVQ-ZDGpkiHwUOILMU4vyExAzV1dWLXUNk78XSn5cuLAgHoDb3Tj870Sj9qGPrWBMC5QQt7F1fbUGOkPMHtWXYamDlIjE4XE5mTURFNsigloyumIdlK4xF265UwUaRNnHzxCsHt8ue0/s1600/Screen+Shot+2017-07-31+at+7.34.23+PM.png)