There are only two hard things in Computer Science: cache invalidation and naming things. -- PHil Karlton
Why give names to actions when your action and reducer can discriminate an action based on type (e.g., MyJobActionType) ?
export const enum MyJobActionType { MY_JOB = 'MY_JOB', MY_JOB_UI = 'MY_JOB_UI', MY_JOB_DATA_FETCHING = 'MY_JOB_DATA_FETCHING', MY_JOB_DATA_FETCHED = 'MY_JOB_DATA_FETCHED', } export type MyJobAction = IMyJobAction | IMyJobUIAction | IMyJobDataFetchingAction | IMyJobDataFetchedAction; interface IMyJobAction extends Action { type: MyJobActionType.MY_JOB; payload?: { jobId: 'new' | number; }; } interface IMyJobUIAction extends Action { type: MyJobActionType.MY_JOB_UI; ui: React.ComponentClass; } interface IMyJobDataFetchingAction extends Action { type: MyJobActionType.MY_JOB_DATA_FETCHING; } interface IMyJobDataFetchedAction extends Action { type: MyJobActionType.MY_JOB_DATA_FETCHED; data: IPagedDto<IPagedMyJobPostDto>; }
Reducer:
export const myJobViewModelReducer = produce(( draft: IMyJobViewModel = { view : null, model: { gridData: no.data } }, action: MyJobAction ) =>
Action:
async function loadUI(dispatch: Dispatch<MyJobAction>) { const component = (await import(/* webpackChunkName: 'myJob' */ './')).default; const uiAction: MyJobAction = { type: MyJobActionType.MY_JOB_UI, ui : component }; await dispatch(uiAction); }
So don't name things then:
export type MyJobAction = { type: MyJobActionType.MY_JOB; payload?: { jobId: 'new' | number; }; } | { type: MyJobActionType.MY_JOB_UI; ui: React.ComponentClass; } | { type: MyJobActionType.MY_JOB_DATA_FETCHING; } | { type: MyJobActionType.MY_JOB_DATA_FETCHED; data: IPagedDto<IPagedMyJobPostDto>; } ;
Are you worried someone might use the wrong payload (e.g., payload, ui, data) when dispatching an action? Don't worry, TypeScript is a smart language.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-0MOb6dvjJVWEyTy_rrEzomoqhIoLaRAQ07nbVTREpo0Yv-r9eE2FqyHcg0t6HgH-BjP4A-E0Z8c-bXPhOXrIDqSS64NGZC7vwBvFLWpglDr5g0vwGtE6LcgCEsA8a30ep4DpmOPCLEXj/s640/Screen+Shot+2018-06-02+at+10.32.33+PM.png)
And just like that, TypeScript can infer that only the ui property is if a good discriminator is used, e.g., type: MyJobActionType.MY_JOB_UI
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW3l885Y8c49WxteoosehhpA_IQ3k8k3DsY39ylwQSO9y-oxZLlkQRz9LbLCKCFC1JvMhxMimTWdgqCn9fWJw3FPIsgH_RIBADVimXvpruIYQnIZ_ia1vRJdmck9vdsijwK1zMfzqrA6Md/s640/Screen+Shot+2018-06-02+at+10.35.27+PM.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3TEo8PBSakHUmwsWInDMEnl0kKhOQgd0HBtEgtV-9HBXfnZY__eu5dL9PPJm6bMNikbxgEnuVRFWPb6SPhKexEIntsrLeN_ntJWc_Yij4MsvBoZ7nwOR3YkdBcATsBvw4G-5lbRLY1GAr/s640/Screen+Shot+2018-06-02+at+10.56.40+PM.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFntZ684zINtNckB9PMulj-2-VKD2c0xt53sfCy_0bE0f0MMadAn9E1uDgTOnQkPGZl1_KyVBBuLrLxf-0C8J13RndCZvPJ1T2oRefs8XajJX0O0fblz6d-BwLz95afRYIi8EatMGCS06a/s640/Screen+Shot+2018-06-02+at+10.59.13+PM.png)
Finally, correct the properties of the object structure that matches type: MyJobActionType.MY_JOB_UI
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitqn6hbxOMVV2dxEp7JWjcEgHvoMrnqfcxDKc4030_V4xUJwSF0_5uM1NNQ5jyT5CX7kuN5Xu1R0661jAwA4Ms7ttaGZyERNYInwtbEI8r9yVezHUwGnhN6yaRNixPCB0QTSNg0FFhT28U/s640/Screen+Shot+2018-06-02+at+11.04.55+PM.png)
Less interfaces, less names need to come up with.
No comments:
Post a Comment