diff --git a/SUMMARY.MD b/SUMMARY.MD index 71b6bb1..1dc368e 100644 --- a/SUMMARY.MD +++ b/SUMMARY.MD @@ -22,7 +22,8 @@ - [[MO] Set up Detox with Jest and automate it on Bitrise *(~ 1h)*](/react-native/tests/setup-detox-jest.mo.md) - [[Standard] Handle Errors and Exceptions in Javascript](/backend/node-js/handle-errors-and-exceptions-in-javascript.s.md) - Flowtype - - [[Standard] Flowtype](/flowtype/flowtype.s.md) + - [[Standard] Flowtype](/flowtype/flowtype.s.md) + - [[Standard] Typing a Container](/flowtype/typing-a-container.s.md) - Project Standards - [Project Success](/project-standards/project-success/index.md) - [[Standard] Deployed in production](/project-standards/project-success/production.s.md) diff --git a/flowtype/typing-a-container.s.md b/flowtype/typing-a-container.s.md new file mode 100644 index 0000000..6a74f6e --- /dev/null +++ b/flowtype/typing-a-container.s.md @@ -0,0 +1,100 @@ +# [Standard] Flow Typing a container + +## Owner: [Yann Leflour](https://github.com/yleflour) + +## Checks + +- [ ] The component's ownprops have to be typed in `TOWnProps` +- [ ] The containers exposes its resulting props through a `TContainerProps` type +- [ ] Your component uses your `TContainerProps` in its `TProps` + +## How + +### 0. Add a `$Return` utils type (1 min) + +- In your flowtypes folder a _utils.js_ folder +- Add the following type, it will help you extract the result of a function + +``` +// flowtypes/utils.js +// @flow + +type Return_) => R> = R; +declare type $Return = Return_<*, T>; + +``` + +### 1. Type your ownprops (2 min) + +- In your _mycomponent.container.js_ file, declare your ownprops type. Those are the props required by the mapStateToProps or mapDispatchToProps methods. + +``` +// mycomponent.container.js +// @flow + +type TOwnProps = { + myItemId: string, +} + +const mapStateToProps = (state: TRootState, ownProps: TOwnProps) => ({...}); +const mapDispatchToProps = (dispatch: Dispatch, ownProps: TOwnProps) => ({...}); +``` + +### 2. Type your _mapStateToProps_ (2 min) + +- In your _mycomponent.container.js_ once you've written the _mapStateToProps_ method, declare your _TStateProps_ + +``` +// mycomponent.container.js +// @flow + +const mapStateToProps = (state: TRootState, ownProps: TOwnProps) => ({...}); + +type TStateProps = $Return; +``` + +### 3. Type your _mapDispatchToProps_ (2 min) + +- In your _mycomponent.container.js_ once you've written the _mapDispatchToProps_ method, declare your _TDispatchProps_ + +``` +// mycomponent.container.js +// @flow + +const mapDispatchToProps1 = (state: TRootState, ownProps: TOwnProps) => ({...}); + +type TDispatchProps1 = $Return; + +// OR + +const mapDispatchToProps2 = {...}; + +type TDispatchProps2 = typeof mapStateToProps2; +``` + +### 4. Type your _TContainerProps_ (2 min) + +- In your _mycomponent.container.js_ declare your _TContainerProps_ and export them + +``` +// mycomponent.container.js +// @flow + +export type TContainerProps = TStateProps & TDispatchProps; +``` + +### 5. Type your TProps (1 min) + +- In your _mycomponent.component.js_ use your _TContainerProps_ + +``` +// mycomponent.component.js +// @flow + +import { type TContainerProps } from './mycomponent.container.js'; + +type TProps = TContainerProps & { + // Add other component required props here +} + +```