Drop versioned docs entirely (#1696)

Author: markerikson

docs/README.md

@@ -9,11 +9,11 @@ hide_title: true
 
 ## Overview
 
-The `<Provider />` makes the Redux `store` available to any nested components that have been wrapped in the `connect()` function.
+The `<Provider>` component makes the Redux `store` available to any nested components that need to access the Redux store.
 
-Since any React component in a React Redux app can be connected, most applications will render a `<Provider>` at the top level, with the entire app’s component tree inside of it.
+Since any React component in a React Redux app can be connected to the store, most applications will render a `<Provider>` at the top level, with the entire app’s component tree inside of it.
 
-Normally, you can’t use a connected component unless it is nested inside of a `<Provider>`.
+The [Hooks](./hooks.md) and [`connect`](./connect.md) APIs can then access the provided store instance via React's Context mechanism.
 
 ### Props
 
@@ -30,29 +30,12 @@ You may provide a context instance. If you do so, you will need to provide the s
 >
 > Could not find "store" in the context of "Connect(MyComponent)". Either wrap the root component in a `<Provider>`, or pass a custom React context provider to `<Provider>` and the corresponding React context consumer to Connect(Todo) in connect options.
 
-**Note:** You do not need to provide custom context in order to access the store.
-React Redux exports the context instance it uses by default so that you can access the store by:
-
-```js
-import { ReactReduxContext } from 'react-redux'
-
-// in your connected component
-render() {
-  return (
-    <ReactReduxContext.Consumer>
-      {({ store }) => {
-        // do something with the store here
-      }}
-    </ReactReduxContext.Consumer>
-  )
-}
-```
+
 
 ### Example Usage
 
 In the example below, the `<App />` component is our root-level component. This means it’s at the very top of our component hierarchy.
 
-**Vanilla React Example**
 
 ```jsx
 import React from 'react'
@@ -72,29 +55,3 @@ ReactDOM.render(
 )
 ```
 
-**Usage with React Router**
-
-```jsx
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { Provider } from 'react-redux'
-import { Router, Route } from 'react-router-dom'
-
-import { App } from './App'
-import { Foo } from './Foo'
-import { Bar } from './Bar'
-import createStore from './createReduxStore'
-
-const store = createStore()
-
-ReactDOM.render(
-  <Provider store={store}>
-    <Router history={history}>
-      <Route exact path="/" component={App} />
-      <Route path="/foo" component={Foo} />
-      <Route path="/bar" component={Bar} />
-    </Router>
-  </Provider>,
-  document.getElementById('root')
-)
-```

docs/api/Provider.md

@@ -11,6 +11,8 @@ hide_title: true
 batch((fn: Function))
 ```
 
+*added in v7.0.0*
+
 React's `unstable_batchedUpdates()` API allows any React updates in an event loop tick to be batched together into a single render pass. React already uses this internally for its own event handler callbacks. This API is actually part of the renderer packages like ReactDOM and React Native, not the React core itself.
 
 Since React-Redux needs to work in both ReactDOM and React Native environments, we've taken care of importing this API from the correct renderer at build time for our own use. We also now re-export this function publicly ourselves, renamed to `batch()`. You can use it to ensure that multiple actions dispatched outside of React only result in a single render update, like this:

docs/api/batch.md

@@ -17,7 +17,12 @@ It does not modify the component class passed to it; instead, it _returns_ a new
 
 Most applications will not need to use this, as the default behavior in `connect` is intended to work for most use cases.
 
-> Note: `connectAdvanced` was added in version 5.0, and `connect` was reimplemented as a specific set of parameters to `connectAdvanced`.
+:::info
+
+`connectAdvanced` was added in version 5.0, and `connect` was reimplemented as a specific set of parameters to `connectAdvanced`.  However, [**`connectAdvanced` is now deprecated**](https://github.com/reduxjs/react-redux/issues/1236) and will eventually be removed in a future major version of React Redux.
+
+:::
+
 
 ## Arguments
 

docs/api/connect-advanced.md

@@ -577,3 +577,13 @@ const makeMapState = (state) => {
 }
 export default connect(makeMapState)(SomeComponent)
 ```
+
+
+## Legacy Version Docs
+
+While the `connect` API has stayed almost entirely API-compatible between all of our major versions, there have been some small changes in options and behavior from version to version.
+
+For details on the legacy 5.x and 6.x versions, please see these archived files in the React Redux repo:
+
+- [5.x `connect` API reference](https://github.com/reduxjs/react-redux/blob/v7.2.2/website/versioned_docs/version-5.x/api/connect.md)
+- [6.x `connect` API reference](https://github.com/reduxjs/react-redux/blob/v7.2.2/website/versioned_docs/version-6.x/api/connect.md)

docs/api/connect.md

@@ -7,9 +7,9 @@ hide_title: true
 
 # Hooks
 
-React's new ["hooks" APIs](https://reactjs.org/docs/hooks-intro.html) give function components the ability to use local component state, execute side effects, and more.
+React's new ["hooks" APIs](https://reactjs.org/docs/hooks-intro.html) give function components the ability to use local component state, execute side effects, and more.  React also lets us write [custom hooks](https://reactjs.org/docs/hooks-custom.html), which let us extract reusable hooks to add our own behavior on top of React's built-in hooks.
 
-React Redux now offers a set of hook APIs as an alternative to the existing `connect()` Higher Order Component. These APIs allow you to subscribe to the Redux store and dispatch actions, without having to wrap your components in `connect()`.
+React Redux includes its own custom hook APIs, which allow your React components to subscribe to the Redux store and dispatch actions. 
 
 :::tip
 

docs/api/hooks.md

@@ -0,0 +1,122 @@
+---
+id: getting-started
+title: Getting Started
+hide_title: true
+sidebar_label: Getting Started
+---
+
+# Getting Started with React Redux
+
+[React Redux](https://github.com/reduxjs/react-redux) is the official [React](https://reactjs.org/) UI bindings layer for [Redux](https://redux.js.org/). It lets your React components read data from a Redux store, and dispatch actions to the store to update state.
+
+## Installation
+
+React Redux 7.1+ requires **React 16.8.3 or later**, in order to make use of React Hooks.
+
+### Using Create React App
+
+The recommended way to start new apps with React Redux is by using the [official Redux+JS template](https://github.com/reduxjs/cra-template-redux) for [Create React App](https://github.com/facebook/create-react-app), which takes advantage of [Redux Toolkit](https://redux-toolkit.js.org/).
+
+```sh
+npx create-react-app my-app --template redux
+```
+
+### An Existing React App
+
+To use React Redux with your React app, install it as a dependency:
+
+```bash
+# If you use npm:
+npm install react-redux
+
+# Or if you use Yarn:
+yarn add react-redux
+```
+
+You'll also need to [install Redux](https://redux.js.org/introduction/installation) and [set up a Redux store](https://redux.js.org/recipes/configuring-your-store/) in your app.
+
+If you are using TypeScript, the React Redux types are maintained separately in DefinitelyTyped. You'll need to install those as well:
+
+```bash
+npm install @types/react-redux
+```
+
+## `Provider`
+
+React Redux includes a `<Provider />` component, which makes the Redux store available to the rest of your app:
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import { Provider } from 'react-redux'
+import store from './store'
+
+import App from './App'
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  rootElement
+)
+```
+
+## Hooks
+
+React Redux provides a pair of custom React hooks that allow your React components to interact with the Redux store.
+
+`useSelector` reads a value from the store state and subscribes to updates, while `useDispatch` returns the store's `dispatch` method to let you dispatch actions.
+
+```js
+import React, { useState } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import {
+  decrement,
+  increment,
+  incrementByAmount,
+  incrementAsync,
+  selectCount
+} from './counterSlice'
+import styles from './Counter.module.css'
+
+export function Counter() {
+  const count = useSelector(selectCount)
+  const dispatch = useDispatch()
+  const [incrementAmount, setIncrementAmount] = useState('2')
+
+  return (
+    <div>
+      <div className={styles.row}>
+        <button
+          className={styles.button}
+          aria-label="Increment value"
+          onClick={() => dispatch(increment())}
+        >
+          +
+        </button>
+        <span className={styles.value}>{count}</span>
+        <button
+          className={styles.button}
+          aria-label="Decrement value"
+          onClick={() => dispatch(decrement())}
+        >
+          -
+        </button>
+      </div>
+      {/* omit additional rendering output here */}
+    </div>
+  )
+}
+```
+
+## Help and Discussion
+
+The **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** of the **[Reactiflux Discord community](http://www.reactiflux.com)** is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us!
+
+You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**.
+
+## Docs Translations
+
+- [Portuguese](https://fernandobelotto.github.io/react-redux)