From 7df6a0ac60eec93900f0c3505a69b271f4c30f48 Mon Sep 17 00:00:00 2001
From: Wei Gao <wgao19@gmail.com>
Date: Fri, 21 Jun 2019 12:13:48 +0000
Subject: [PATCH 1/6] docs: annotating connected components with Flow

---
 ...notating-connected-components-with-flow.md | 177 +++++++++++++++++
 ...notating-connected-components-with-flow.md | 178 ++++++++++++++++++
 .../version-5.x-sidebars.json                 |   7 +-
 .../version-6.x-sidebars.json                 |   7 +-
 .../version-7.0-sidebars.json                 |   3 +-
 .../version-7.1-sidebars.json                 |   7 +-
 6 files changed, 366 insertions(+), 13 deletions(-)
 create mode 100644 docs/using-react-redux/annotating-connected-components-with-flow.md
 create mode 100644 website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md

diff --git a/docs/using-react-redux/annotating-connected-components-with-flow.md b/docs/using-react-redux/annotating-connected-components-with-flow.md
new file mode 100644
index 000000000..ad98ebdab
--- /dev/null
+++ b/docs/using-react-redux/annotating-connected-components-with-flow.md
@@ -0,0 +1,177 @@
+---
+id: annotating-connected-components-with-flow
+title: Annotating Connected Components with Flow
+hide_title: true
+sidebar_label: Annotating Connected Components with Flow
+---
+
+# Annotating Connected Components with Flow
+
+After Flow 0.85, Flow starts [Asking for Required Annotations](https://medium.com/flow-type/asking-for-required-annotations-64d4f9c1edf8) on implicit calls of higher order components within each file import — export cycle. This facilitates Flow to merge type information from file dependencies _before_ it walks the type structure and conducts type inference.
+
+This helps Flow gain significantly better coverage on higher order components. But it also asks that we explicitly annotate the connected components at file exports. Exporting implicit calls of `connect` will raise error:
+
+    Missing type annotation for OP. OP is a type parameter declared in function type [1] and was implicitly
+    instantiated at call of connect [2].
+
+In general, to make Flow happy with connect after 0.85 is a two-phase fix. First, you need to explicitly annotate each connected components at file exports. This shall clear all the “implicitly instantiated” errors. Then, if your codebase contains mismatched types between component definitions and usages, Flow will report those errors after you fix the implicit instantiation errors.
+
+## Fixing the “implicitly instantiated” errors at calls of `connect`
+
+To begin, you need:
+
+- Flow upgraded to v0.89+
+- [Newest Flow Typed library definition for React Redux](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/react-redux_v5.x.x.js)
+
+We include three major use cases for annotating `connect` with Flow:
+
+- Connecting stateless component with `mapStateToProps`
+- Connecting components with `mapDispatchToProps` of action creators
+- Connecting components with `mapStateToProps` and `mapDispatchToProps` of action creators
+
+### Connecting stateless component with `mapStateToProps`
+
+```jsx
+type OwnProps = {|
+  passthrough: number,
+  forMapStateToProps: string,
+|};
+type Props = {
+  ...OwnProps,
+  fromStateToProps: string
+};
+const Com = (props: Props) => <div>{props.passthrough} {props.fromStateToProps}</div>
+
+type State = {a: number};
+type InputProps = {
+  forMapStateToProps: string
+};
+const mapStateToProps = (state: State, props: InputProps) => {
+  return {
+    fromStateToProps: 'str' + state.a
+  }
+};
+
+const Connected = connect<Props, OwnProps, _,_,_,_>(mapStateToProps)(Com);
+```
+
+### Connecting components with `mapDispatchToProps` of action creators
+
+```jsx
+type OwnProps = {|
+  passthrough: number,
+|};
+type Props = {
+  ...OwnProps,
+  dispatch1: (num: number) => void,
+  dispatch2: () => void
+};
+class Com extends React.Component<Props> {
+  render() {
+    return <div>{this.props.passthrough}</div>;
+  }
+}
+
+const mapDispatchToProps = {
+  dispatch1: (num: number) => {},
+  dispatch2: () => {}
+};
+const Connected = connect<Props, OwnProps, _, _, _, _>(null, mapDispatchToProps)(Com);
+e.push(Connected);
+<Connected passthrough={123} />;
+```
+
+### Connecting components with `mapStateToProps` and `mapDispatchToProps` of action creators
+
+```jsx
+type OwnProps = {|
+  passthrough: number,
+  forMapStateToProps: string
+|};
+type Props = {
+  ...OwnProps,
+  dispatch1: () => void,
+  dispatch2: () => void,
+  fromMapStateToProps: number
+};
+class Com extends React.Component<Props> {
+  render() {
+    return <div>{this.props.passthrough}</div>;
+  }
+}
+type State = {a: number}
+type MapStateToPropsProps = {forMapStateToProps: string}
+const mapStateToProps = (state: State, props: MapStateToPropsProps) => {
+  return {
+    fromMapStateToProps: state.a
+  }
+}
+const mapDispatchToProps = {
+  dispatch1: () => {},
+  dispatch2: () => {}
+};
+const Connected = connect<Props, OwnProps, _, _, _, _>(mapStateToProps, mapDispatchToProps)(Com);
+```
+
+## Annotating nested higher order components with connect
+
+If you are at the unfortunate position where your component is wrapped with nested higher order component, it is probably more difficult to annotate by providing explicit type parameters, as doing so will probably require tediously deducing prop types at each layer:
+
+```jsx
+import { compose } from "redux";
+
+type AllProps = {/** ... */};
+
+compose(
+  connect(mapState, mapDispatch),
+  withA<$Diff<$Diff<$Diff<AllProps, withDProps>, withCProps>, withBProps>>,
+  withB<$Diff<$Diff<AllProps, withDProps>, withCProps>>,
+  withC<$Diff<AllProps, withDProps>>,
+  withD<AllProps>
+)(ComponentWithEverything);
+```
+
+It is probably easier if you annotate once at file export:
+
+```jsx
+type Props = {|
+  passthrough: number
+|}
+type AllProps = {
+  // spreaded props should be exact
+  ...Props,
+  injectedPropA: string,
+  injectedPropB: boolean,
+  injectedPropC: number,
+  injectedPropD: any
+}
+
+const Component = (props: AllProps) => {
+  /** ... */
+}
+
+export default (compose(
+  withA,
+  withB,
+  withC,
+  withD
+)(Component): React.AbstractComponent<Props>)
+```
+
+## Benefits of this version
+
+After fixing the implicit instantiation errors, Flow now is able to report errors on type mismatches cross connected components and provide accurate error messages:
+
+![](https://i.imgur.com/mt79yaC.png)
+
+## References
+
+- [Asking for Required Annotations](https://medium.com/flow-type/asking-for-required-annotations-64d4f9c1edf8)
+- [Flow Typed tests for React Redux `connect`](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/test_connect.js#L449)
+- [Quick Note Fixing `connect` FlowType Annotation after 0.89](https://dev.to/wgao19/quick-note-fixing-connect-flowtype-annotation-after-089-joi)
+- [Connect Examples from Flow Typed tests](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/test_connect.js#L156)
+- [Ville's and Jordan Brown's guide: _Adding Type Parameters to Connect_](https://gist.github.com/jbrown215/f425203ef30fdc8a28c213b90ba7a794)
+- [flow-typed/#2946: Discussion after 0.85](https://github.com/flow-typed/flow-typed/issues/2946)
+- Add support for Flow 0.89+: [#3012](https://github.com/flow-typed/flow-typed/pull/3035), [#3035](https://github.com/flow-typed/flow-typed/pull/3035)
+- [What's `_`?](https://github.com/facebook/flow/commit/ec70da4510d3a092fa933081c083bd0e513d0518)
+- [Flow Be Happy](https://engineers.sg/video/flow-be-happy-reactjs-singapore--3419) A talk on migrating Flow past 0.85
diff --git a/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md b/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md
new file mode 100644
index 000000000..827d19b74
--- /dev/null
+++ b/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md
@@ -0,0 +1,178 @@
+---
+id: version-5.x-annotating-connected-components-with-flow
+title: Annotating Connected Components with Flow
+hide_title: true
+sidebar_label: Annotating Connected Components with Flow
+original_id: annotating-connected-components-with-flow
+---
+
+# Annotating Connected Components with Flow
+
+After Flow 0.85, Flow starts [Asking for Required Annotations](https://medium.com/flow-type/asking-for-required-annotations-64d4f9c1edf8) on implicit calls of higher order components within each file import — export cycle. This facilitates Flow to merge type information from file dependencies _before_ it walks the type structure and conducts type inference.
+
+This helps Flow gain significantly better coverage on higher order components. But it also asks that we explicitly annotate the connected components at file exports. Exporting implicit calls of `connect` will raise error:
+
+    Missing type annotation for OP. OP is a type parameter declared in function type [1] and was implicitly
+    instantiated at call of connect [2].
+
+In general, to make Flow happy with connect after 0.85 is a two-phase fix. First, you need to explicitly annotate each connected components at file exports. This shall clear all the “implicitly instantiated” errors. Then, if your codebase contains mismatched types between component definitions and usages, Flow will report those errors after you fix the implicit instantiation errors.
+
+## Fixing the “implicitly instantiated” errors at calls of `connect`
+
+To begin, you need:
+
+- Flow upgraded to v0.89+
+- [Newest Flow Typed library definition for React Redux](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/react-redux_v5.x.x.js)
+
+We include three major use cases for annotating `connect` with Flow:
+
+- Connecting stateless component with `mapStateToProps`
+- Connecting components with `mapDispatchToProps` of action creators
+- Connecting components with `mapStateToProps` and `mapDispatchToProps` of action creators
+
+### Connecting stateless component with `mapStateToProps`
+
+```jsx
+type OwnProps = {|
+  passthrough: number,
+  forMapStateToProps: string,
+|};
+type Props = {
+  ...OwnProps,
+  fromStateToProps: string
+};
+const Com = (props: Props) => <div>{props.passthrough} {props.fromStateToProps}</div>
+
+type State = {a: number};
+type InputProps = {
+  forMapStateToProps: string
+};
+const mapStateToProps = (state: State, props: InputProps) => {
+  return {
+    fromStateToProps: 'str' + state.a
+  }
+};
+
+const Connected = connect<Props, OwnProps, _,_,_,_>(mapStateToProps)(Com);
+```
+
+### Connecting components with `mapDispatchToProps` of action creators
+
+```jsx
+type OwnProps = {|
+  passthrough: number,
+|};
+type Props = {
+  ...OwnProps,
+  dispatch1: (num: number) => void,
+  dispatch2: () => void
+};
+class Com extends React.Component<Props> {
+  render() {
+    return <div>{this.props.passthrough}</div>;
+  }
+}
+
+const mapDispatchToProps = {
+  dispatch1: (num: number) => {},
+  dispatch2: () => {}
+};
+const Connected = connect<Props, OwnProps, _, _, _, _>(null, mapDispatchToProps)(Com);
+e.push(Connected);
+<Connected passthrough={123} />;
+```
+
+### Connecting components with `mapStateToProps` and `mapDispatchToProps` of action creators
+
+```jsx
+type OwnProps = {|
+  passthrough: number,
+  forMapStateToProps: string
+|};
+type Props = {
+  ...OwnProps,
+  dispatch1: () => void,
+  dispatch2: () => void,
+  fromMapStateToProps: number
+};
+class Com extends React.Component<Props> {
+  render() {
+    return <div>{this.props.passthrough}</div>;
+  }
+}
+type State = {a: number}
+type MapStateToPropsProps = {forMapStateToProps: string}
+const mapStateToProps = (state: State, props: MapStateToPropsProps) => {
+  return {
+    fromMapStateToProps: state.a
+  }
+}
+const mapDispatchToProps = {
+  dispatch1: () => {},
+  dispatch2: () => {}
+};
+const Connected = connect<Props, OwnProps, _, _, _, _>(mapStateToProps, mapDispatchToProps)(Com);
+```
+
+## Annotating nested higher order components with connect
+
+If you are at the unfortunate position where your component is wrapped with nested higher order component, it is probably more difficult to annotate by providing explicit type parameters, as doing so will probably require tediously deducing prop types at each layer:
+
+```jsx
+import { compose } from "redux";
+
+type AllProps = {/** ... */};
+
+compose(
+  connect(mapState, mapDispatch),
+  withA<$Diff<$Diff<$Diff<AllProps, withDProps>, withCProps>, withBProps>>,
+  withB<$Diff<$Diff<AllProps, withDProps>, withCProps>>,
+  withC<$Diff<AllProps, withDProps>>,
+  withD<AllProps>
+)(ComponentWithEverything);
+```
+
+It is probably easier if you annotate once at file export:
+
+```jsx
+type Props = {|
+  passthrough: number
+|}
+type AllProps = {
+  // spreaded props should be exact
+  ...Props,
+  injectedPropA: string,
+  injectedPropB: boolean,
+  injectedPropC: number,
+  injectedPropD: any
+}
+
+const Component = (props: AllProps) => {
+  /** ... */
+}
+
+export default (compose(
+  withA,
+  withB,
+  withC,
+  withD
+)(Component): React.AbstractComponent<Props>)
+```
+
+## Benefits of this version
+
+After fixing the implicit instantiation errors, Flow now is able to report errors on type mismatches cross connected components and provide accurate error messages:
+
+![](https://i.imgur.com/mt79yaC.png)
+
+## References
+
+- [Asking for Required Annotations](https://medium.com/flow-type/asking-for-required-annotations-64d4f9c1edf8)
+- [Flow Typed tests for React Redux `connect`](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/test_connect.js#L449)
+- [Quick Note Fixing `connect` FlowType Annotation after 0.89](https://dev.to/wgao19/quick-note-fixing-connect-flowtype-annotation-after-089-joi)
+- [Connect Examples from Flow Typed tests](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/test_connect.js#L156)
+- [Ville's and Jordan Brown's guide: _Adding Type Parameters to Connect_](https://gist.github.com/jbrown215/f425203ef30fdc8a28c213b90ba7a794)
+- [flow-typed/#2946: Discussion after 0.85](https://github.com/flow-typed/flow-typed/issues/2946)
+- Add support for Flow 0.89+: [#3012](https://github.com/flow-typed/flow-typed/pull/3035), [#3035](https://github.com/flow-typed/flow-typed/pull/3035)
+- [What's `_`?](https://github.com/facebook/flow/commit/ec70da4510d3a092fa933081c083bd0e513d0518)
+- [Flow Be Happy](https://engineers.sg/video/flow-be-happy-reactjs-singapore--3419) A talk on migrating Flow past 0.85
diff --git a/website/versioned_sidebars/version-5.x-sidebars.json b/website/versioned_sidebars/version-5.x-sidebars.json
index 07aabf72e..c3daac111 100644
--- a/website/versioned_sidebars/version-5.x-sidebars.json
+++ b/website/versioned_sidebars/version-5.x-sidebars.json
@@ -7,7 +7,8 @@
     ],
     "Using React-Redux": [
       "version-5.x-using-react-redux/connect-mapstate",
-      "version-5.x-using-react-redux/connect-mapdispatch"
+      "version-5.x-using-react-redux/connect-mapdispatch",
+      "version-5.x-using-react-redux/annotating-connected-components-with-flow"
     ],
     "API Reference": [
       "version-5.x-api",
@@ -15,8 +16,6 @@
       "version-5.x-api/connect-advanced",
       "version-5.x-api/provider"
     ],
-    "Guides": [
-      "version-5.x-troubleshooting"
-    ]
+    "Guides": ["version-5.x-troubleshooting"]
   }
 }
diff --git a/website/versioned_sidebars/version-6.x-sidebars.json b/website/versioned_sidebars/version-6.x-sidebars.json
index 3e43837af..3ce96027e 100644
--- a/website/versioned_sidebars/version-6.x-sidebars.json
+++ b/website/versioned_sidebars/version-6.x-sidebars.json
@@ -8,15 +8,14 @@
     "Using React Redux": [
       "version-6.x-using-react-redux/connect-mapstate",
       "version-6.x-using-react-redux/connect-mapdispatch",
-      "version-6.x-using-react-redux/accessing-store"
+      "version-6.x-using-react-redux/accessing-store",
+      "version-6.x-using-react-redux/annotating-connected-components-with-flow"
     ],
     "API Reference": [
       "version-6.x-api/connect",
       "version-6.x-api/provider",
       "version-6.x-api/connect-advanced"
     ],
-    "Guides": [
-      "version-6.x-troubleshooting"
-    ]
+    "Guides": ["version-6.x-troubleshooting"]
   }
 }
diff --git a/website/versioned_sidebars/version-7.0-sidebars.json b/website/versioned_sidebars/version-7.0-sidebars.json
index dc9450640..d50adc87a 100644
--- a/website/versioned_sidebars/version-7.0-sidebars.json
+++ b/website/versioned_sidebars/version-7.0-sidebars.json
@@ -8,7 +8,8 @@
     "Using React Redux": [
       "version-7.0-using-react-redux/connect-mapstate",
       "version-7.0-using-react-redux/connect-mapdispatch",
-      "version-7.0-using-react-redux/accessing-store"
+      "version-7.0-using-react-redux/accessing-store",
+      "version-7.0-using-react-redux/annotating-connected-components-with-flow"
     ],
     "API Reference": [
       "version-7.0-api/connect",
diff --git a/website/versioned_sidebars/version-7.1-sidebars.json b/website/versioned_sidebars/version-7.1-sidebars.json
index e184f7756..3c89777a2 100644
--- a/website/versioned_sidebars/version-7.1-sidebars.json
+++ b/website/versioned_sidebars/version-7.1-sidebars.json
@@ -8,7 +8,8 @@
     "Using React Redux": [
       "version-7.1-using-react-redux/connect-mapstate",
       "version-7.1-using-react-redux/connect-mapdispatch",
-      "version-7.1-using-react-redux/accessing-store"
+      "version-7.1-using-react-redux/accessing-store",
+      "version-7.1-using-react-redux/annotating-connected-components-with-flow"
     ],
     "API Reference": [
       "version-7.1-api/connect",
@@ -17,8 +18,6 @@
       "version-7.1-api/batch",
       "version-7.1-api/hooks"
     ],
-    "Guides": [
-      "version-7.1-troubleshooting"
-    ]
+    "Guides": ["version-7.1-troubleshooting"]
   }
 }

From 876e4e8e1e5d007d38aeb276083fece1371c146c Mon Sep 17 00:00:00 2001
From: Wei Gao <wgao19@gmail.com>
Date: Sat, 22 Jun 2019 17:03:46 +0000
Subject: [PATCH 2/6] Update doc content for Flow annotating connect

- Remove use case of `$Diff`
- Put a couple notes on recommended usage of exact objects
---
 ...notating-connected-components-with-flow.md | 178 +++++++++++++-----
 ...notating-connected-components-with-flow.md | 178 +++++++++++++-----
 2 files changed, 256 insertions(+), 100 deletions(-)

diff --git a/docs/using-react-redux/annotating-connected-components-with-flow.md b/docs/using-react-redux/annotating-connected-components-with-flow.md
index ad98ebdab..7a6ece3e5 100644
--- a/docs/using-react-redux/annotating-connected-components-with-flow.md
+++ b/docs/using-react-redux/annotating-connected-components-with-flow.md
@@ -18,28 +18,104 @@ In general, to make Flow happy with connect after 0.85 is a two-phase fix. First
 
 ## Fixing the “implicitly instantiated” errors at calls of `connect`
 
-To begin, you need:
+> **Note:** We need `React.AbstractComponent` from Flow v0.89+
 
-- Flow upgraded to v0.89+
-- [Newest Flow Typed library definition for React Redux](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/react-redux_v5.x.x.js)
+### Annotating at function return
 
-We include three major use cases for annotating `connect` with Flow:
+The easiest way to annotate connected components is to annotate at function call return. To do this, we need to know to types of props in our components:
+
+- `OwnProps`: likely contain or equal to what you need as the second parameter to `mapStateToProps`. If there are props that are not used by `mapStateToProps`, i.e., the props that "pass through", include them here in `OwnProps` as well
+- `Props`: `OwnProps` plus the props passed in by `mapStateToProps` and `mapDispatchToProps`
+
+> **Note:** Inexact objects don't spread nor `$Diff` very well. It is strongly recommended that you use exact objects for connected components all the time.
+
+```js
+type OwnProps = {|
+  passthrough: string,
+  forMapStateToProps: string
+|}
+
+type Props = {|
+  ...OwnProps,
+  fromMapStateToProps: string,
+  dispatch1: () => void
+|}
+```
+
+With `OwnProps` and `Props` in figured out, we are now ready to annotate the connected components.
+
+In _component definition_, annotate the props with `Props`. The component will have access to all the injected props from `connect`:
+
+```jsx
+import * as React from 'react'
+
+const MyComponent = (props: Props) => (
+  <div onClick={props.dispatch1}>
+    {props.passthrough}
+    {props.fromMapStateToProps}
+  </div>
+)
+```
+
+When we export, this is also when we normally call `connect`, annotate the exported component with _just_ `OwnProps`:
+
+```jsx
+import * as React from 'react'
+
+// const MyComponent = ...
+
+export default (connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(MyComponent): React.AbstractComponent<OwnProps>)
+```
+
+### Annotating by providing explicit type parameters
+
+We may also annotate connected components by providing explicit type parameters at call of `connect` with the help of the [newest Flow Typed library definition for React Redux](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/react-redux_v5.x.x.js). Note that this will also require Flow v0.89+.
+
+The Flow Typed library definition declares `connect` as follows:
+
+```js
+declare export function connect<-P, -OP, -SP, -DP, -S, -D>(
+  mapStateToProps?: null | void,
+  mapDispatchToProps?: null | void,
+  mergeProps?: null | void,
+  options?: ?Options<S, OP, {||}, MergeOP<OP, D>>
+): Connector<P, OP, MergeOP<OP, D>>
+```
+
+The libdef also contains a [glossary of the abbreviations](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/react-redux_v5.x.x.js#L14) which decrypts the signature to:
+
+```jsx
+connect<Props, OwnProps, StateProps, DispatchProps, State, Dispatch>(…)
+```
+
+For the most common ways to connect components, we won't need all of the parameters. Normally, we need only `OwnProps` and `Props` at the call of `connect`, and `State` at the definition of `mapStateToProps`.
+
+We may use `_` ([what's this?](https://github.com/facebook/flow/commit/ec70da4510d3a092fa933081c083bd0e513d0518)) as placeholder at unused type parameter positions. A common `connect` call may look like this:
+
+```jsx
+connect<Props, OwnProps, _, _, _, _>(…)
+```
+
+We include examples for three major use cases of annotating `connect` with Flow:
 
 - Connecting stateless component with `mapStateToProps`
 - Connecting components with `mapDispatchToProps` of action creators
 - Connecting components with `mapStateToProps` and `mapDispatchToProps` of action creators
 
-### Connecting stateless component with `mapStateToProps`
+#### Connecting stateless component with `mapStateToProps`
 
 ```jsx
 type OwnProps = {|
   passthrough: number,
   forMapStateToProps: string,
 |};
-type Props = {
+type Props = {|
   ...OwnProps,
   fromStateToProps: string
-};
+|};
 const Com = (props: Props) => <div>{props.passthrough} {props.fromStateToProps}</div>
 
 type State = {a: number};
@@ -52,20 +128,20 @@ const mapStateToProps = (state: State, props: InputProps) => {
   }
 };
 
-const Connected = connect<Props, OwnProps, _,_,_,_>(mapStateToProps)(Com);
+const Connected = connect<Props, OwnProps, _, _, _, _>(mapStateToProps)(Com);
 ```
 
-### Connecting components with `mapDispatchToProps` of action creators
+#### Connecting components with `mapDispatchToProps` of action creators
 
 ```jsx
 type OwnProps = {|
   passthrough: number,
 |};
-type Props = {
+type Props = {|
   ...OwnProps,
   dispatch1: (num: number) => void,
   dispatch2: () => void
-};
+|};
 class Com extends React.Component<Props> {
   render() {
     return <div>{this.props.passthrough}</div>;
@@ -81,19 +157,19 @@ e.push(Connected);
 <Connected passthrough={123} />;
 ```
 
-### Connecting components with `mapStateToProps` and `mapDispatchToProps` of action creators
+#### Connecting components with `mapStateToProps` and `mapDispatchToProps` of action creators
 
 ```jsx
 type OwnProps = {|
   passthrough: number,
   forMapStateToProps: string
 |};
-type Props = {
+type Props = {|
   ...OwnProps,
   dispatch1: () => void,
   dispatch2: () => void,
   fromMapStateToProps: number
-};
+|};
 class Com extends React.Component<Props> {
   render() {
     return <div>{this.props.passthrough}</div>;
@@ -113,65 +189,67 @@ const mapDispatchToProps = {
 const Connected = connect<Props, OwnProps, _, _, _, _>(mapStateToProps, mapDispatchToProps)(Com);
 ```
 
-## Annotating nested higher order components with connect
+### Annotating nested higher order components with connect
 
-If you are at the unfortunate position where your component is wrapped with nested higher order component, it is probably more difficult to annotate by providing explicit type parameters, as doing so will probably require tediously deducing prop types at each layer:
-
-```jsx
-import { compose } from "redux";
-
-type AllProps = {/** ... */};
-
-compose(
-  connect(mapState, mapDispatch),
-  withA<$Diff<$Diff<$Diff<AllProps, withDProps>, withCProps>, withBProps>>,
-  withB<$Diff<$Diff<AllProps, withDProps>, withCProps>>,
-  withC<$Diff<AllProps, withDProps>>,
-  withD<AllProps>
-)(ComponentWithEverything);
-```
-
-It is probably easier if you annotate once at file export:
+If you are at the unfortunate position where your component is wrapped with nested higher order component, it is probably more difficult to annotate by providing explicit type parameters, as doing so will probably require that you tediously take away props at each layer. It is agian easier to annotate at function return:
 
 ```jsx
+type OwnProps = {|
+  passthrough: number,
+  forMapStateToProps: string,
+|}
 type Props = {|
-  passthrough: number
+  ...OwnProps,
+  injectedA: string,
+  injectedB: string,
+  fromMapStateToProps: string,
+  dispatch1: (number) => void,
+  dispatch2: () => void,
 |}
-type AllProps = {
-  // spreaded props should be exact
-  ...Props,
-  injectedPropA: string,
-  injectedPropB: boolean,
-  injectedPropC: number,
-  injectedPropD: any
-}
 
-const Component = (props: AllProps) => {
+const Component = (props: Props) => { // annotate the component with all props including injected props
   /** ... */
 }
 
+const mapStateToProps = (state: State, ownProps: OwnProps) => {
+  return { fromMapStateToProps: 'str' + ownProps.forMapStateToProps },
+}
+const mapDispatchToProps = {
+  dispatch1: number => {},
+  dispatch2: () => {},
+}
+
 export default (compose(
+  connect(mapStateToProps, mapDispatchToProps),
   withA,
   withB,
-  withC,
-  withD
-)(Component): React.AbstractComponent<Props>)
+)(Component): React.AbstractComponent<OwnProps>)  // export the connected component without injected props
 ```
 
 ## Benefits of this version
 
-After fixing the implicit instantiation errors, Flow now is able to report errors on type mismatches cross connected components and provide accurate error messages:
+After fixing the implicit instantiation errors, if your code contains mismatched types between connected components, the total number of errors may go _up_. This is the result of Flow's improved coverage. If you are using console output for the Flow errors, you may not be able to see those errors until you clear other errors. These additional errors are grouped together, all tied back to React Redux's library definition, and have friendly error messages that will pin point you to the lines of code to the errors.
 
 ![](https://i.imgur.com/mt79yaC.png)
 
 ## References
 
+**Articles**
+
 - [Asking for Required Annotations](https://medium.com/flow-type/asking-for-required-annotations-64d4f9c1edf8)
-- [Flow Typed tests for React Redux `connect`](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/test_connect.js#L449)
-- [Quick Note Fixing `connect` FlowType Annotation after 0.89](https://dev.to/wgao19/quick-note-fixing-connect-flowtype-annotation-after-089-joi)
-- [Connect Examples from Flow Typed tests](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/test_connect.js#L156)
+
+**Upgrading guides**
+
 - [Ville's and Jordan Brown's guide: _Adding Type Parameters to Connect_](https://gist.github.com/jbrown215/f425203ef30fdc8a28c213b90ba7a794)
+- [Quick Note Fixing `connect` FlowType Annotation after 0.89](https://dev.to/wgao19/quick-note-fixing-connect-flowtype-annotation-after-089-joi)
+
+**Talks**
+
+- [Flow Be Happy](https://engineers.sg/video/flow-be-happy-reactjs-singapore--3419) A talk on upgrading Flow past 0.85, [slides](https://flow-be-happy.netlify.com/)
+
+**Others**
+
+- [Flow Typed tests for React Redux `connect`](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/test_connect.js)
 - [flow-typed/#2946: Discussion after 0.85](https://github.com/flow-typed/flow-typed/issues/2946)
 - Add support for Flow 0.89+: [#3012](https://github.com/flow-typed/flow-typed/pull/3035), [#3035](https://github.com/flow-typed/flow-typed/pull/3035)
 - [What's `_`?](https://github.com/facebook/flow/commit/ec70da4510d3a092fa933081c083bd0e513d0518)
-- [Flow Be Happy](https://engineers.sg/video/flow-be-happy-reactjs-singapore--3419) A talk on migrating Flow past 0.85
diff --git a/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md b/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md
index 827d19b74..fd6a49dc5 100644
--- a/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md
+++ b/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md
@@ -19,28 +19,104 @@ In general, to make Flow happy with connect after 0.85 is a two-phase fix. First
 
 ## Fixing the “implicitly instantiated” errors at calls of `connect`
 
-To begin, you need:
+> **Note:** We need `React.AbstractComponent` from Flow v0.89+
 
-- Flow upgraded to v0.89+
-- [Newest Flow Typed library definition for React Redux](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/react-redux_v5.x.x.js)
+### Annotating at function return
 
-We include three major use cases for annotating `connect` with Flow:
+The easiest way to annotate connected components is to annotate at function call return. To do this, we need to know to types of props in our components:
+
+- `OwnProps`: likely contain or equal to what you need as the second parameter to `mapStateToProps`. If there are props that are not used by `mapStateToProps`, i.e., the props that "pass through", include them here in `OwnProps` as well
+- `Props`: `OwnProps` plus the props passed in by `mapStateToProps` and `mapDispatchToProps`
+
+> **Note:** Inexact objects don't spread nor `$Diff` very well. It is strongly recommended that you use exact objects for connected components all the time.
+
+```js
+type OwnProps = {|
+  passthrough: string,
+  forMapStateToProps: string
+|}
+
+type Props = {|
+  ...OwnProps,
+  fromMapStateToProps: string,
+  dispatch1: () => void
+|}
+```
+
+With `OwnProps` and `Props` in figured out, we are now ready to annotate the connected components.
+
+In _component definition_, annotate the props with `Props`. The component will have access to all the injected props from `connect`:
+
+```jsx
+import * as React from 'react'
+
+const MyComponent = (props: Props) => (
+  <div onClick={props.dispatch1}>
+    {props.passthrough}
+    {props.fromMapStateToProps}
+  </div>
+)
+```
+
+When we export, this is also when we normally call `connect`, annotate the exported component with _just_ `OwnProps`:
+
+```jsx
+import * as React from 'react'
+
+// const MyComponent = ...
+
+export default (connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(MyComponent): React.AbstractComponent<OwnProps>)
+```
+
+### Annotating by providing explicit type parameters
+
+We may also annotate connected components by providing explicit type parameters at call of `connect` with the help of the [newest Flow Typed library definition for React Redux](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/react-redux_v5.x.x.js). Note that this will also require Flow v0.89+.
+
+The Flow Typed library definition declares `connect` as follows:
+
+```js
+declare export function connect<-P, -OP, -SP, -DP, -S, -D>(
+  mapStateToProps?: null | void,
+  mapDispatchToProps?: null | void,
+  mergeProps?: null | void,
+  options?: ?Options<S, OP, {||}, MergeOP<OP, D>>
+): Connector<P, OP, MergeOP<OP, D>>
+```
+
+The libdef also contains a [glossary of the abbreviations](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/react-redux_v5.x.x.js#L14) which decrypts the signature to:
+
+```jsx
+connect<Props, OwnProps, StateProps, DispatchProps, State, Dispatch>(…)
+```
+
+For the most common ways to connect components, we won't need all of the parameters. Normally, we need only `OwnProps` and `Props` at the call of `connect`, and `State` at the definition of `mapStateToProps`.
+
+We may use `_` ([what's this?](https://github.com/facebook/flow/commit/ec70da4510d3a092fa933081c083bd0e513d0518)) as placeholder at unused type parameter positions. A common `connect` call may look like this:
+
+```jsx
+connect<Props, OwnProps, _, _, _, _>(…)
+```
+
+We include examples for three major use cases of annotating `connect` with Flow:
 
 - Connecting stateless component with `mapStateToProps`
 - Connecting components with `mapDispatchToProps` of action creators
 - Connecting components with `mapStateToProps` and `mapDispatchToProps` of action creators
 
-### Connecting stateless component with `mapStateToProps`
+#### Connecting stateless component with `mapStateToProps`
 
 ```jsx
 type OwnProps = {|
   passthrough: number,
   forMapStateToProps: string,
 |};
-type Props = {
+type Props = {|
   ...OwnProps,
   fromStateToProps: string
-};
+|};
 const Com = (props: Props) => <div>{props.passthrough} {props.fromStateToProps}</div>
 
 type State = {a: number};
@@ -53,20 +129,20 @@ const mapStateToProps = (state: State, props: InputProps) => {
   }
 };
 
-const Connected = connect<Props, OwnProps, _,_,_,_>(mapStateToProps)(Com);
+const Connected = connect<Props, OwnProps, _, _, _, _>(mapStateToProps)(Com);
 ```
 
-### Connecting components with `mapDispatchToProps` of action creators
+#### Connecting components with `mapDispatchToProps` of action creators
 
 ```jsx
 type OwnProps = {|
   passthrough: number,
 |};
-type Props = {
+type Props = {|
   ...OwnProps,
   dispatch1: (num: number) => void,
   dispatch2: () => void
-};
+|};
 class Com extends React.Component<Props> {
   render() {
     return <div>{this.props.passthrough}</div>;
@@ -82,19 +158,19 @@ e.push(Connected);
 <Connected passthrough={123} />;
 ```
 
-### Connecting components with `mapStateToProps` and `mapDispatchToProps` of action creators
+#### Connecting components with `mapStateToProps` and `mapDispatchToProps` of action creators
 
 ```jsx
 type OwnProps = {|
   passthrough: number,
   forMapStateToProps: string
 |};
-type Props = {
+type Props = {|
   ...OwnProps,
   dispatch1: () => void,
   dispatch2: () => void,
   fromMapStateToProps: number
-};
+|};
 class Com extends React.Component<Props> {
   render() {
     return <div>{this.props.passthrough}</div>;
@@ -114,65 +190,67 @@ const mapDispatchToProps = {
 const Connected = connect<Props, OwnProps, _, _, _, _>(mapStateToProps, mapDispatchToProps)(Com);
 ```
 
-## Annotating nested higher order components with connect
+### Annotating nested higher order components with connect
 
-If you are at the unfortunate position where your component is wrapped with nested higher order component, it is probably more difficult to annotate by providing explicit type parameters, as doing so will probably require tediously deducing prop types at each layer:
-
-```jsx
-import { compose } from "redux";
-
-type AllProps = {/** ... */};
-
-compose(
-  connect(mapState, mapDispatch),
-  withA<$Diff<$Diff<$Diff<AllProps, withDProps>, withCProps>, withBProps>>,
-  withB<$Diff<$Diff<AllProps, withDProps>, withCProps>>,
-  withC<$Diff<AllProps, withDProps>>,
-  withD<AllProps>
-)(ComponentWithEverything);
-```
-
-It is probably easier if you annotate once at file export:
+If you are at the unfortunate position where your component is wrapped with nested higher order component, it is probably more difficult to annotate by providing explicit type parameters, as doing so will probably require that you tediously take away props at each layer. It is agian easier to annotate at function return:
 
 ```jsx
+type OwnProps = {|
+  passthrough: number,
+  forMapStateToProps: string,
+|}
 type Props = {|
-  passthrough: number
+  ...OwnProps,
+  injectedA: string,
+  injectedB: string,
+  fromMapStateToProps: string,
+  dispatch1: (number) => void,
+  dispatch2: () => void,
 |}
-type AllProps = {
-  // spreaded props should be exact
-  ...Props,
-  injectedPropA: string,
-  injectedPropB: boolean,
-  injectedPropC: number,
-  injectedPropD: any
-}
 
-const Component = (props: AllProps) => {
+const Component = (props: Props) => { // annotate the component with all props including injected props
   /** ... */
 }
 
+const mapStateToProps = (state: State, ownProps: OwnProps) => {
+  return { fromMapStateToProps: 'str' + ownProps.forMapStateToProps },
+}
+const mapDispatchToProps = {
+  dispatch1: number => {},
+  dispatch2: () => {},
+}
+
 export default (compose(
+  connect(mapStateToProps, mapDispatchToProps),
   withA,
   withB,
-  withC,
-  withD
-)(Component): React.AbstractComponent<Props>)
+)(Component): React.AbstractComponent<OwnProps>)  // export the connected component without injected props
 ```
 
 ## Benefits of this version
 
-After fixing the implicit instantiation errors, Flow now is able to report errors on type mismatches cross connected components and provide accurate error messages:
+After fixing the implicit instantiation errors, if your code contains mismatched types between connected components, the total number of errors may go _up_. This is the result of Flow's improved coverage. If you are using console output for the Flow errors, you may not be able to see those errors until you clear other errors. These additional errors are grouped together, all tied back to React Redux's library definition, and have friendly error messages that will pin point you to the lines of code to the errors.
 
 ![](https://i.imgur.com/mt79yaC.png)
 
 ## References
 
+**Articles**
+
 - [Asking for Required Annotations](https://medium.com/flow-type/asking-for-required-annotations-64d4f9c1edf8)
-- [Flow Typed tests for React Redux `connect`](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/test_connect.js#L449)
-- [Quick Note Fixing `connect` FlowType Annotation after 0.89](https://dev.to/wgao19/quick-note-fixing-connect-flowtype-annotation-after-089-joi)
-- [Connect Examples from Flow Typed tests](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/test_connect.js#L156)
+
+**Upgrading guides**
+
 - [Ville's and Jordan Brown's guide: _Adding Type Parameters to Connect_](https://gist.github.com/jbrown215/f425203ef30fdc8a28c213b90ba7a794)
+- [Quick Note Fixing `connect` FlowType Annotation after 0.89](https://dev.to/wgao19/quick-note-fixing-connect-flowtype-annotation-after-089-joi)
+
+**Talks**
+
+- [Flow Be Happy](https://engineers.sg/video/flow-be-happy-reactjs-singapore--3419) A talk on upgrading Flow past 0.85, [slides](https://flow-be-happy.netlify.com/)
+
+**Others**
+
+- [Flow Typed tests for React Redux `connect`](https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/test_connect.js)
 - [flow-typed/#2946: Discussion after 0.85](https://github.com/flow-typed/flow-typed/issues/2946)
 - Add support for Flow 0.89+: [#3012](https://github.com/flow-typed/flow-typed/pull/3035), [#3035](https://github.com/flow-typed/flow-typed/pull/3035)
 - [What's `_`?](https://github.com/facebook/flow/commit/ec70da4510d3a092fa933081c083bd0e513d0518)
-- [Flow Be Happy](https://engineers.sg/video/flow-be-happy-reactjs-singapore--3419) A talk on migrating Flow past 0.85

From 4a949fe90218fe6a84891932dda8bf21e61da10a Mon Sep 17 00:00:00 2001
From: Wei Gao <wgao19@gmail.com>
Date: Mon, 24 Jun 2019 04:28:35 +0000
Subject: [PATCH 3/6] Remove unnecessary `InputProps`

---
 .../annotating-connected-components-with-flow.md             | 5 +----
 .../annotating-connected-components-with-flow.md             | 5 +----
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/docs/using-react-redux/annotating-connected-components-with-flow.md b/docs/using-react-redux/annotating-connected-components-with-flow.md
index 7a6ece3e5..068b7b840 100644
--- a/docs/using-react-redux/annotating-connected-components-with-flow.md
+++ b/docs/using-react-redux/annotating-connected-components-with-flow.md
@@ -119,10 +119,7 @@ type Props = {|
 const Com = (props: Props) => <div>{props.passthrough} {props.fromStateToProps}</div>
 
 type State = {a: number};
-type InputProps = {
-  forMapStateToProps: string
-};
-const mapStateToProps = (state: State, props: InputProps) => {
+const mapStateToProps = (state: State, props: OwnProps) => {
   return {
     fromStateToProps: 'str' + state.a
   }
diff --git a/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md b/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md
index fd6a49dc5..4c2d731e1 100644
--- a/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md
+++ b/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md
@@ -120,10 +120,7 @@ type Props = {|
 const Com = (props: Props) => <div>{props.passthrough} {props.fromStateToProps}</div>
 
 type State = {a: number};
-type InputProps = {
-  forMapStateToProps: string
-};
-const mapStateToProps = (state: State, props: InputProps) => {
+const mapStateToProps = (state: State, props: OwnProps) => {
   return {
     fromStateToProps: 'str' + state.a
   }

From 15d585592bd12185a6c20aa45022c00e1a5fbb5b Mon Sep 17 00:00:00 2001
From: Wei Gao <wgao19@gmail.com>
Date: Mon, 1 Jul 2019 03:40:21 +0000
Subject: [PATCH 4/6] Create a subcategory for static typing

---
 .../annotating-connected-components-with-flow.md          | 2 +-
 website/sidebars.json                                     | 7 ++++++-
 .../annotating-connected-components-with-flow.md          | 2 +-
 website/versioned_sidebars/version-5.x-sidebars.json      | 8 +++++++-
 website/versioned_sidebars/version-6.x-sidebars.json      | 8 +++++++-
 website/versioned_sidebars/version-7.0-sidebars.json      | 8 +++++++-
 website/versioned_sidebars/version-7.1-sidebars.json      | 8 +++++++-
 7 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/docs/using-react-redux/annotating-connected-components-with-flow.md b/docs/using-react-redux/annotating-connected-components-with-flow.md
index 068b7b840..2d10513e8 100644
--- a/docs/using-react-redux/annotating-connected-components-with-flow.md
+++ b/docs/using-react-redux/annotating-connected-components-with-flow.md
@@ -2,7 +2,7 @@
 id: annotating-connected-components-with-flow
 title: Annotating Connected Components with Flow
 hide_title: true
-sidebar_label: Annotating Connected Components with Flow
+sidebar_label: Flow
 ---
 
 # Annotating Connected Components with Flow
diff --git a/website/sidebars.json b/website/sidebars.json
index d2947ec6d..52bed5dfe 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -8,7 +8,12 @@
     "Using React Redux": [
       "using-react-redux/connect-mapstate",
       "using-react-redux/connect-mapdispatch",
-      "using-react-redux/accessing-store"
+      "using-react-redux/accessing-store",
+      {
+        "type": "subcategory",
+        "label": "Static Typing",
+        "ids": ["using-react-redux/annotating-connected-components-with-flow"]
+      }
     ],
     "API Reference": [
       "api/connect",
diff --git a/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md b/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md
index 4c2d731e1..54773ef1d 100644
--- a/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md
+++ b/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md
@@ -2,7 +2,7 @@
 id: version-5.x-annotating-connected-components-with-flow
 title: Annotating Connected Components with Flow
 hide_title: true
-sidebar_label: Annotating Connected Components with Flow
+sidebar_label: Flow
 original_id: annotating-connected-components-with-flow
 ---
 
diff --git a/website/versioned_sidebars/version-5.x-sidebars.json b/website/versioned_sidebars/version-5.x-sidebars.json
index c3daac111..92212a4f8 100644
--- a/website/versioned_sidebars/version-5.x-sidebars.json
+++ b/website/versioned_sidebars/version-5.x-sidebars.json
@@ -8,7 +8,13 @@
     "Using React-Redux": [
       "version-5.x-using-react-redux/connect-mapstate",
       "version-5.x-using-react-redux/connect-mapdispatch",
-      "version-5.x-using-react-redux/annotating-connected-components-with-flow"
+      {
+        "type": "subcategory",
+        "label": "Static Typing",
+        "ids": [
+          "version-5.x-using-react-redux/annotating-connected-components-with-flow"
+        ]
+      }
     ],
     "API Reference": [
       "version-5.x-api",
diff --git a/website/versioned_sidebars/version-6.x-sidebars.json b/website/versioned_sidebars/version-6.x-sidebars.json
index 3ce96027e..80a089873 100644
--- a/website/versioned_sidebars/version-6.x-sidebars.json
+++ b/website/versioned_sidebars/version-6.x-sidebars.json
@@ -9,7 +9,13 @@
       "version-6.x-using-react-redux/connect-mapstate",
       "version-6.x-using-react-redux/connect-mapdispatch",
       "version-6.x-using-react-redux/accessing-store",
-      "version-6.x-using-react-redux/annotating-connected-components-with-flow"
+      {
+        "type": "subcategory",
+        "label": "Static Typing",
+        "ids": [
+          "version-6.x-using-react-redux/annotating-connected-components-with-flow"
+        ]
+      }
     ],
     "API Reference": [
       "version-6.x-api/connect",
diff --git a/website/versioned_sidebars/version-7.0-sidebars.json b/website/versioned_sidebars/version-7.0-sidebars.json
index d50adc87a..19e4ee0d3 100644
--- a/website/versioned_sidebars/version-7.0-sidebars.json
+++ b/website/versioned_sidebars/version-7.0-sidebars.json
@@ -9,7 +9,13 @@
       "version-7.0-using-react-redux/connect-mapstate",
       "version-7.0-using-react-redux/connect-mapdispatch",
       "version-7.0-using-react-redux/accessing-store",
-      "version-7.0-using-react-redux/annotating-connected-components-with-flow"
+      {
+        "type": "subcategory",
+        "label": "Static Typing",
+        "ids": [
+          "version-7.0-using-react-redux/annotating-connected-components-with-flow"
+        ]
+      }
     ],
     "API Reference": [
       "version-7.0-api/connect",
diff --git a/website/versioned_sidebars/version-7.1-sidebars.json b/website/versioned_sidebars/version-7.1-sidebars.json
index 3c89777a2..ff9df43f2 100644
--- a/website/versioned_sidebars/version-7.1-sidebars.json
+++ b/website/versioned_sidebars/version-7.1-sidebars.json
@@ -9,7 +9,13 @@
       "version-7.1-using-react-redux/connect-mapstate",
       "version-7.1-using-react-redux/connect-mapdispatch",
       "version-7.1-using-react-redux/accessing-store",
-      "version-7.1-using-react-redux/annotating-connected-components-with-flow"
+      {
+        "type": "subcategory",
+        "label": "Static Typing",
+        "ids": [
+          "version-7.1-using-react-redux/annotating-connected-components-with-flow"
+        ]
+      }
     ],
     "API Reference": [
       "version-7.1-api/connect",

From 8fbbaac1cea5610b3f9e3be099e9aa11f7bb73f7 Mon Sep 17 00:00:00 2001
From: Wei Gao <wgao19@gmail.com>
Date: Mon, 1 Jul 2019 03:49:19 +0000
Subject: [PATCH 5/6] Rename Flow doc titles

---
 ...components-with-flow.md => static-typing-with-flow.md} | 6 +++---
 website/sidebars.json                                     | 2 +-
 ...components-with-flow.md => static-typing-with-flow.md} | 8 ++++----
 website/versioned_sidebars/version-5.x-sidebars.json      | 4 +---
 website/versioned_sidebars/version-6.x-sidebars.json      | 4 +---
 website/versioned_sidebars/version-7.0-sidebars.json      | 4 +---
 website/versioned_sidebars/version-7.1-sidebars.json      | 4 +---
 7 files changed, 12 insertions(+), 20 deletions(-)
 rename docs/using-react-redux/{annotating-connected-components-with-flow.md => static-typing-with-flow.md} (98%)
 rename website/versioned_docs/version-5.x/using-react-redux/{annotating-connected-components-with-flow.md => static-typing-with-flow.md} (97%)

diff --git a/docs/using-react-redux/annotating-connected-components-with-flow.md b/docs/using-react-redux/static-typing-with-flow.md
similarity index 98%
rename from docs/using-react-redux/annotating-connected-components-with-flow.md
rename to docs/using-react-redux/static-typing-with-flow.md
index 2d10513e8..7733ec69e 100644
--- a/docs/using-react-redux/annotating-connected-components-with-flow.md
+++ b/docs/using-react-redux/static-typing-with-flow.md
@@ -1,11 +1,11 @@
 ---
-id: annotating-connected-components-with-flow
-title: Annotating Connected Components with Flow
+id: static-typing-with-flow
+title: Static Typing with Flow
 hide_title: true
 sidebar_label: Flow
 ---
 
-# Annotating Connected Components with Flow
+# Static Typing with Flow
 
 After Flow 0.85, Flow starts [Asking for Required Annotations](https://medium.com/flow-type/asking-for-required-annotations-64d4f9c1edf8) on implicit calls of higher order components within each file import — export cycle. This facilitates Flow to merge type information from file dependencies _before_ it walks the type structure and conducts type inference.
 
diff --git a/website/sidebars.json b/website/sidebars.json
index 52bed5dfe..97b745782 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -12,7 +12,7 @@
       {
         "type": "subcategory",
         "label": "Static Typing",
-        "ids": ["using-react-redux/annotating-connected-components-with-flow"]
+        "ids": ["using-react-redux/static-typing-with-flow"]
       }
     ],
     "API Reference": [
diff --git a/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md b/website/versioned_docs/version-5.x/using-react-redux/static-typing-with-flow.md
similarity index 97%
rename from website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md
rename to website/versioned_docs/version-5.x/using-react-redux/static-typing-with-flow.md
index 54773ef1d..0a42c24d1 100644
--- a/website/versioned_docs/version-5.x/using-react-redux/annotating-connected-components-with-flow.md
+++ b/website/versioned_docs/version-5.x/using-react-redux/static-typing-with-flow.md
@@ -1,12 +1,12 @@
 ---
-id: version-5.x-annotating-connected-components-with-flow
-title: Annotating Connected Components with Flow
+id: version-5.x-static-typing-with-flow
+title: Static Typing with Flow
 hide_title: true
 sidebar_label: Flow
-original_id: annotating-connected-components-with-flow
+original_id: static-typing-with-flow
 ---
 
-# Annotating Connected Components with Flow
+# Static Typing with Flow
 
 After Flow 0.85, Flow starts [Asking for Required Annotations](https://medium.com/flow-type/asking-for-required-annotations-64d4f9c1edf8) on implicit calls of higher order components within each file import — export cycle. This facilitates Flow to merge type information from file dependencies _before_ it walks the type structure and conducts type inference.
 
diff --git a/website/versioned_sidebars/version-5.x-sidebars.json b/website/versioned_sidebars/version-5.x-sidebars.json
index 92212a4f8..b8e84f0bc 100644
--- a/website/versioned_sidebars/version-5.x-sidebars.json
+++ b/website/versioned_sidebars/version-5.x-sidebars.json
@@ -11,9 +11,7 @@
       {
         "type": "subcategory",
         "label": "Static Typing",
-        "ids": [
-          "version-5.x-using-react-redux/annotating-connected-components-with-flow"
-        ]
+        "ids": ["version-5.x-using-react-redux/static-typing-with-flow"]
       }
     ],
     "API Reference": [
diff --git a/website/versioned_sidebars/version-6.x-sidebars.json b/website/versioned_sidebars/version-6.x-sidebars.json
index 80a089873..d6af5484f 100644
--- a/website/versioned_sidebars/version-6.x-sidebars.json
+++ b/website/versioned_sidebars/version-6.x-sidebars.json
@@ -12,9 +12,7 @@
       {
         "type": "subcategory",
         "label": "Static Typing",
-        "ids": [
-          "version-6.x-using-react-redux/annotating-connected-components-with-flow"
-        ]
+        "ids": ["version-6.x-using-react-redux/static-typing-with-flow"]
       }
     ],
     "API Reference": [
diff --git a/website/versioned_sidebars/version-7.0-sidebars.json b/website/versioned_sidebars/version-7.0-sidebars.json
index 19e4ee0d3..661093ada 100644
--- a/website/versioned_sidebars/version-7.0-sidebars.json
+++ b/website/versioned_sidebars/version-7.0-sidebars.json
@@ -12,9 +12,7 @@
       {
         "type": "subcategory",
         "label": "Static Typing",
-        "ids": [
-          "version-7.0-using-react-redux/annotating-connected-components-with-flow"
-        ]
+        "ids": ["version-7.0-using-react-redux/static-typing-with-flow"]
       }
     ],
     "API Reference": [
diff --git a/website/versioned_sidebars/version-7.1-sidebars.json b/website/versioned_sidebars/version-7.1-sidebars.json
index ff9df43f2..6288eb64d 100644
--- a/website/versioned_sidebars/version-7.1-sidebars.json
+++ b/website/versioned_sidebars/version-7.1-sidebars.json
@@ -12,9 +12,7 @@
       {
         "type": "subcategory",
         "label": "Static Typing",
-        "ids": [
-          "version-7.1-using-react-redux/annotating-connected-components-with-flow"
-        ]
+        "ids": ["version-7.1-using-react-redux/static-typing-with-flow"]
       }
     ],
     "API Reference": [

From 79004841b2aab12b34cd1ae600dd5894b0dbd23e Mon Sep 17 00:00:00 2001
From: Wei Gao <wgao19@gmail.com>
Date: Mon, 1 Jul 2019 03:53:40 +0000
Subject: [PATCH 6/6] Add placeholder doc for TypeScript

---
 .../static-typing-with-typescript.md                  | 10 ++++++++++
 website/sidebars.json                                 |  5 ++++-
 .../static-typing-with-typescript.md                  | 11 +++++++++++
 website/versioned_sidebars/version-5.x-sidebars.json  |  5 ++++-
 website/versioned_sidebars/version-6.x-sidebars.json  |  5 ++++-
 website/versioned_sidebars/version-7.0-sidebars.json  |  5 ++++-
 website/versioned_sidebars/version-7.1-sidebars.json  |  5 ++++-
 7 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 docs/using-react-redux/static-typing-with-typescript.md
 create mode 100644 website/versioned_docs/version-5.x/using-react-redux/static-typing-with-typescript.md

diff --git a/docs/using-react-redux/static-typing-with-typescript.md b/docs/using-react-redux/static-typing-with-typescript.md
new file mode 100644
index 000000000..d0bb63e70
--- /dev/null
+++ b/docs/using-react-redux/static-typing-with-typescript.md
@@ -0,0 +1,10 @@
+---
+id: static-typing-with-typescript
+title: Static Typing with TypeScript
+hide_title: true
+sidebar_label: TypeScript
+---
+
+# Static Typing with TypeScript
+
+We're looking for help on this section, [file a PR](https://github.com/reduxjs/react-redux/issues/1001#issuecomment-503532530).
diff --git a/website/sidebars.json b/website/sidebars.json
index 97b745782..44515e867 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -12,7 +12,10 @@
       {
         "type": "subcategory",
         "label": "Static Typing",
-        "ids": ["using-react-redux/static-typing-with-flow"]
+        "ids": [
+          "using-react-redux/static-typing-with-flow",
+          "using-react-redux/static-typing-with-typescript"
+        ]
       }
     ],
     "API Reference": [
diff --git a/website/versioned_docs/version-5.x/using-react-redux/static-typing-with-typescript.md b/website/versioned_docs/version-5.x/using-react-redux/static-typing-with-typescript.md
new file mode 100644
index 000000000..e260e739b
--- /dev/null
+++ b/website/versioned_docs/version-5.x/using-react-redux/static-typing-with-typescript.md
@@ -0,0 +1,11 @@
+---
+id: version-5.x-static-typing-with-typescript
+title: Static Typing with TypeScript
+hide_title: true
+sidebar_label: TypeScript
+original_id: static-typing-with-typescript
+---
+
+# Static Typing with TypeScript
+
+We're looking for help on this section, [file a PR](https://github.com/reduxjs/react-redux/issues/1001#issuecomment-503532530).
diff --git a/website/versioned_sidebars/version-5.x-sidebars.json b/website/versioned_sidebars/version-5.x-sidebars.json
index b8e84f0bc..614969ec4 100644
--- a/website/versioned_sidebars/version-5.x-sidebars.json
+++ b/website/versioned_sidebars/version-5.x-sidebars.json
@@ -11,7 +11,10 @@
       {
         "type": "subcategory",
         "label": "Static Typing",
-        "ids": ["version-5.x-using-react-redux/static-typing-with-flow"]
+        "ids": [
+          "version-5.x-using-react-redux/static-typing-with-flow",
+          "version-5.x-using-react-redux/static-typing-with-typescript"
+        ]
       }
     ],
     "API Reference": [
diff --git a/website/versioned_sidebars/version-6.x-sidebars.json b/website/versioned_sidebars/version-6.x-sidebars.json
index d6af5484f..e72618fbe 100644
--- a/website/versioned_sidebars/version-6.x-sidebars.json
+++ b/website/versioned_sidebars/version-6.x-sidebars.json
@@ -12,7 +12,10 @@
       {
         "type": "subcategory",
         "label": "Static Typing",
-        "ids": ["version-6.x-using-react-redux/static-typing-with-flow"]
+        "ids": [
+          "version-6.x-using-react-redux/static-typing-with-flow",
+          "version-6.x-using-react-redux/static-typing-with-typescript"
+        ]
       }
     ],
     "API Reference": [
diff --git a/website/versioned_sidebars/version-7.0-sidebars.json b/website/versioned_sidebars/version-7.0-sidebars.json
index 661093ada..84878ada7 100644
--- a/website/versioned_sidebars/version-7.0-sidebars.json
+++ b/website/versioned_sidebars/version-7.0-sidebars.json
@@ -12,7 +12,10 @@
       {
         "type": "subcategory",
         "label": "Static Typing",
-        "ids": ["version-7.0-using-react-redux/static-typing-with-flow"]
+        "ids": [
+          "version-7.0-using-react-redux/static-typing-with-flow",
+          "version-7.0-using-react-redux/static-typing-with-typescript"
+        ]
       }
     ],
     "API Reference": [
diff --git a/website/versioned_sidebars/version-7.1-sidebars.json b/website/versioned_sidebars/version-7.1-sidebars.json
index 6288eb64d..f41272fc1 100644
--- a/website/versioned_sidebars/version-7.1-sidebars.json
+++ b/website/versioned_sidebars/version-7.1-sidebars.json
@@ -12,7 +12,10 @@
       {
         "type": "subcategory",
         "label": "Static Typing",
-        "ids": ["version-7.1-using-react-redux/static-typing-with-flow"]
+        "ids": [
+          "version-7.1-using-react-redux/static-typing-with-flow",
+          "version-7.1-using-react-redux/static-typing-with-typescript"
+        ]
       }
     ],
     "API Reference": [