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)

docs/introduction/getting-started.md

@@ -7,74 +7,19 @@ hide_title: true
 
 ## Troubleshooting
 
-Make sure to check out [Troubleshooting Redux](https://redux.js.org/troubleshooting) first.
+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!
 
-### I'm getting the following alert: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
+You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**.
 
-This warning is shown when using react 15.5.\*. Basically, now it's just a warning, but in react16 the application might break. the PropTypes should now be imported from 'prop-types' package, and not from the react package.
-
-Update to the latest version of react-redux.
 
 ### My views aren’t updating!
 
-See the link above.
 In short,
 
 - Reducers should never mutate state, they must return new objects, or React Redux won’t see the updates.
-- Make sure you either bind action creators with the `mapDispatchToProps` argument to `connect()` or with the `bindActionCreators()` method, or that you manually call `dispatch()`. Just calling your `MyActionCreators.addTodo()` function won’t work because it just _returns_ an action, but does not _dispatch_ it.
-
-### My views aren’t updating on route change with React Router 0.13
-
-If you’re using React Router 0.13, you might [bump into this problem](https://github.com/reduxjs/react-redux/issues/43). The solution is simple: whenever you use `<RouteHandler>` or the `Handler` provided by `Router.run`, pass the router state to it.
-
-Root view:
-
-```jsx
-Router.run(routes, Router.HistoryLocation, (Handler, routerState) => {
-  // note "routerState" here
-  ReactDOM.render(
-    <Provider store={store}>
-      {/* note "routerState" here */}
-      <Handler routerState={routerState} />
-    </Provider>,
-    document.getElementById('root')
-  )
-})
-```
-
-Nested view:
-
-```js
-render() {
-  // Keep passing it down
-  return <RouteHandler routerState={this.props.routerState} />
-}
-```
-
-Conveniently, this gives your components access to the router state!
-You can also upgrade to React Router 1.0 which shouldn’t have this problem. (Let us know if it does!)
-
-### My views aren’t updating when something changes outside of Redux
-
-If your views depend on global state or [React “context”](http://facebook.github.io/react/docs/context.html), you might find that views decorated with `connect()` will fail to update.
-
-> This is because `connect()` implements [shouldComponentUpdate](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) by default, assuming that your component will produce the same results given the same props and state. This is a similar concept to React’s [PureRenderMixin](https://facebook.github.io/react/docs/pure-render-mixin.html).
-
-The _best_ solution to this is to make sure that your components are pure and pass any external state to them via props. This will ensure that your views do not re-render unless they actually need to re-render and will greatly speed up your application.
+- Make sure you are actually _dispatching_ actions. For example, if you have an action creator like `addTodo`, just calling the imported `addTodo()` function by itself won't do anything because it just _returns_ an action, but does not _dispatch_ it.  You either need to call `dispatch(addTodo())` (if using the hooks API) or `props.addTodo()` (if using `connect` + `mapDispatch`).
 
-If that’s not practical for whatever reason (for example, if you’re using a library that depends heavily on React context), you may pass the `pure: false` option to `connect()`:
-
-```js
-function mapStateToProps(state) {
-  return { todos: state.todos }
-}
-
-export default connect(mapStateToProps, null, null, {
-  pure: false,
-})(TodoApp)
-```
 
-This will remove the assumption that `TodoApp` is pure and cause it to update whenever its parent component renders. Note that this will make your application less performant, so only do this if you have no other option.
 
 ### Could not find "store" in either the context or props
 

docs/introduction/quick-start.md

@@ -1,11 +1,19 @@
 ---
-id: basic-tutorial
-title: Basic Tutorial
+id: connect
+title: "Tutorial: Connect API"
 hide_title: true
-sidebar_label: Basic Tutorial
+sidebar_label: 
 ---
 
-# Basic Tutorial
+# Tutorial: Using the `connect` API
+
+:::tip
+
+We now recommend using [the React-Redux hooks API as the default](../api/hooks.md). However, the `connect` API still works fine.
+
+This tutorial also shows some older practices we no longer recommend, like separating Redux logic into folders by type. We've kept this tutorial as-is for completeness, but recommend reading through [the "Redux Essentials" tutorial](https://redux.js.org/tutorials/essentials/part-1-overview-concepts) and the [Redux Style Guide](https://redux.js.org/style-guide/style-guide) in the Redux docs for our current best practices.
+
+:::
 
 To see how to use React Redux in practice, we’ll show a step-by-step example by creating a todo list app.
 

docs/troubleshooting.md

@@ -34,7 +34,7 @@ The [`useStore` hook](../api/hooks.md#useStore) returns the current store instan
 
 Instead of using the default context instance from React Redux, you may supply your own custom context instance.
 
-```js
+```jsx
 <Provider context={MyContext} store={store}>
   <App />
 </Provider>
@@ -75,7 +75,7 @@ The following runtime error occurs when React Redux does not find a store in the
 ## Multiple Stores
 
 [Redux was designed to use a single store](https://redux.js.org/api/store#a-note-for-flux-users).
-However, if you are in an unavoidable position of needing to use multiple stores, with v6 you may do so by providing (multiple) custom contexts.
+However, if you are in an unavoidable position of needing to use multiple stores, as of v6 you may do so by providing (multiple) custom contexts.
 This also provides a natural isolation of the stores as they live in separate context instances.
 
 ```js
@@ -118,17 +118,26 @@ compose(
 In rare cases, you may need to access the Redux store directly in your own components. This can be done by rendering
 the appropriate context consumer yourself, and accessing the `store` field out of the context value.
 
-> **Note**: This is **_not_ considered part of the React Redux public API, and may break without notice**. We do recognize
-> that the community has use cases where this is necessary, and will try to make it possible for users to build additional
-> functionality on top of React Redux, but our specific use of context is considered an implementation detail.
-> If you have additional use cases that are not sufficiently covered by the current APIs, please file an issue to discuss
-> possible API improvements.
+:::caution
 
-```js
+This is **_not_ considered part of the React Redux public API, and may break without notice**. We do recognize
+that the community has use cases where this is necessary, and will try to make it possible for users to build additional
+functionality on top of React Redux, but our specific use of context is considered an implementation detail.
+If you have additional use cases that are not sufficiently covered by the current APIs, please file an issue to discuss
+possible API improvements.
+
+:::
+
+```jsx
 import { ReactReduxContext } from 'react-redux'
 
-// in your connected component
+// Somewhere inside of a <Provider>
 function MyConnectedComponent() {
+  // Access the store via the `useContext` hook
+  const {store} = useContext(ReactReduxContext)
+
+  // alternately, use the render props form of the context
+  /*
   return (
     <ReactReduxContext.Consumer>
       {({ store }) => {
@@ -137,6 +146,7 @@ function MyConnectedComponent() {
       }}
     </ReactReduxContext.Consumer>
   )
+  */
 }
 ```
 

docs/introduction/basic-tutorial.md docs/tutorials/connect.md

@@ -1,19 +1,17 @@
 ---
-id: static-typing
-title: Static Typing
+id: usage-with-typescript
+title: Usage with TypeScript
 hide_title: true
-sidebar_label: Static Typing
+sidebar_label: Usage with TypeScript
 ---
 
-# Static Typing
+# Usage with TypeScript
 
-React-Redux is currently written in plain JavaScript. However, it works well with static type systems such as TypeScript and Flow.
+React-Redux itself is currently written in plain JavaScript. However, it works well with static type systems such as TypeScript and Flow.
 
-## TypeScript
+React-Redux doesn't ship with its own type definitions. If you are using TypeScript you should install the [`@types/react-redux` type definitions](https://npm.im/@types/react-redux) from NPM. In addition to typing the library functions, the types also export some helpers to make it easier to write typesafe interfaces between your Redux store and your React components.
 
-React-Redux doesn't ship with its own type definitions. If you are using Typescript you should install the [`@types/react-redux` type definitions](https://npm.im/@types/react-redux) from npm. In addition to typing the library functions, the types also export some helpers to make it easier to write typesafe interfaces between your Redux store and your React components.
-
-### Defining the Root State Type
+## Defining the Root State Type
 
 Both `mapState` and `useSelector` depend on declaring the type of the complete Redux store state value. While this type could be written by hand, the easiest way to define it is to have TypeScript infer it based on what your root reducer function returns. This way, the type is automatically updated as the reducer functions are modified.
 
@@ -29,7 +27,7 @@ export type RootState = ReturnType<typeof rootReducer>
 // {posts: PostsState, comments: CommentsState, users: UsersState}
 ```
 
-### Typing the `useSelector` hook
+## Typing the `useSelector` hook
 
 When writing selector functions for use with `useSelector`, you should explicitly define the type of the `state` parameter. TS should be able to then infer the return type of the selector, which will be reused as the return type of the `useSelector` hook:
 
@@ -63,7 +61,7 @@ import { useTypedSelector } from './reducer.ts'
 const isOn = useTypedSelector((state) => state.isOn)
 ```
 
-### Typing the `useDispatch` hook
+## Typing the `useDispatch` hook
 
 By default, the return value of `useDispatch` is the standard `Dispatch` type defined by the Redux core types, so no declarations are needed:
 
@@ -88,9 +86,9 @@ export type AppDispatch = typeof store.dispatch
 export const useAppDispatch = () => useDispatch<AppDispatch>() // Export a hook that can be reused to resolve types
 ```
 
-### Typing the `connect` higher order component
+## Typing the `connect` higher order component
 
-#### Manually Typing `connect`
+### Manually Typing `connect`
 
 The `connect` higher-order component is somewhat complex to type, because there are 3 sources of props: `mapStateToProps`, `mapDispatchToProps`, and props passed in from the parent component. Here's a full example of what it looks like to do that manually.
 
@@ -153,7 +151,7 @@ type Props = StateProps & DispatchProps & OwnProps
 
 However, inferring the type of `mapDispatch` this way will break if it is defined as an object and also refers to thunks.
 
-#### Inferring The Connected Props Automatically
+### Inferring The Connected Props Automatically
 
 `connect` consists of two functions that are called sequentially. The first function accepts `mapState` and `mapDispatch` as arguments, and returns a second function. The second function accepts the component to be wrapped, and returns a new wrapper component that passes down the props from `mapState` and `mapDispatch`. Normally, both functions are called together, like `connect(mapState, mapDispatch)(MyComponent)`.
 
@@ -216,7 +214,7 @@ type PropsFromRedux = ConnectedProps<typeof connector>
 export default connector(MyComponent)
 ```
 
-### Recommendations
+## Recommendations
 
 The hooks API is generally simpler to use with static types. **If you're looking for the easiest solution for using static types with React-Redux, use the hooks API.**
 
@@ -226,7 +224,7 @@ If you're using `connect`, **we recommend using the `ConnectedProps<T>` approach
 
 For additional information, see these additional resources:
 
-- [Redux docs: Usage with TypeScript](https://redux.js.org/recipes/usage-with-typescript): Examples of how to declare types for actions, reducers, and the store
-- [Redux Toolkit docs: Advanced Tutorial](https://redux-toolkit.js.org/tutorials/advanced-tutorial): shows how to use RTK and the React-Redux hooks API with TypeScript
+- [Redux docs: Usage with TypeScript](https://redux.js.org/recipes/usage-with-typescript): Examples of how to use Redux Toolkit, the Redux core, and React Redux with TypeScript
+- [Redux Toolkit docs: TypeScript Quick start](https://redux-toolkit.js.org/tutorials/typescript): shows how to use RTK and the React-Redux hooks API with TypeScript
 - [React+TypeScript Cheatsheet](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet): a comprehensive guide to using React with TypeScript
 - [React + Redux in TypeScript Guide](https://github.com/piotrwitek/react-redux-typescript-guide): extensive information on patterns for using React and Redux with TypeScript

docs/using-react-redux/accessing-store.md

@@ -4,3 +4,20 @@
 /docs/using-react-redux/connect-dispatching-actions-with-mapdispatchtoprops       /using-react-redux/connect-mapdispatch
 
 /docs/*          /:splat
+
+# Renamed pages
+/introduction/quick-start               /introduction/getting-started
+/next/introduction/quick-started        /introduction/getting-started
+
+/introduction/basic-tutorial            /tutorials/connect
+/next/introduction/basic-tutorial       /tutorials/connect
+
+/using-react-redux/static-typing        /using-react-redux/usage-with-typescript
+
+# Drop versioned docs and redirect all legacy versions to the "current" version
+/next/*         /:splat
+/5.x/*          /:splat
+/6.x/*          /:splat
+/7.0/*          /:splat
+/7.1/*          /:splat
+/versions       /introduction/getting-started

docs/using-react-redux/static-types.md docs/using-react-redux/usage-with-typescript.md

@@ -16,10 +16,10 @@ const siteConfig = {
       {
         docs: {
           path: '../docs',
-          sidebarPath: require.resolve('./sidebars.json'),
+          sidebarPath: require.resolve('./sidebars.js'),
           routeBasePath: '/',
           include: [
-            '{api,introduction,using-react-redux}/*.{md,mdx}',
+            '{api,introduction,using-react-redux,tutorials}/*.{md,mdx}',
             'troubleshooting.md'
           ] // no other way to exclude node_modules
         },
@@ -41,28 +41,11 @@ const siteConfig = {
   // Used for publishing and more
   projectName: 'react-redux',
   organizationName: 'reduxjs',
-  // For top-level user or org sites, the organization is still the same.
-  // e.g., for the https://JoelMarcey.github.io site, it would be set like...
-  //   organizationName: 'JoelMarcey'
 
   // For no header links in the top nav bar -> headerLinks: [],
   /* path to images for header/footer */
   favicon: 'img/favicon/favicon.ico',
 
-  /* Custom fonts for website */
-  /*
-  fonts: {
-    myFont: [
-      "Times New Roman",
-      "Serif"
-    ],
-    myOtherFont: [
-      "-apple-system",
-      "system-ui"
-    ]
-  },
-  */
-
   // Add custom scripts here that would be placed in <script> tags.
   scripts: [
     '/scripts/sidebarScroll.js',
@@ -73,19 +56,11 @@ const siteConfig = {
       async: true
     }
   ],
-
   // You may provide arbitrary config keys to be used as needed by your
   // template. For example, if you need your repo's URL...
   customFields: {
     repoUrl: 'https://github.com/reduxjs/react-redux'
   },
-  /**
-   * Note:
-   * This will generate a link on the versioned docs page for "pre-release versions"
-   * Once next version is released, run "yarn run version 7.x", and docusaurus will add 7.x to stable version
-   * After that, 7.x will no longer appear in "pre-release" versions and we should remove this line
-   * More info: https://docusaurus.io/docs/en/versioning
-   */
   themeConfig: {
     metadatas: [{ name: 'twitter:card', content: 'summary' }],
     prism: {
@@ -100,13 +75,13 @@ const siteConfig = {
       },
       items: [
         {
-          type: 'docsVersionDropdown',
-          position: 'left'
-          // Do not add the link active class when browsing docs.
+          to: 'introduction/getting-started',
+          label: 'Getting Started',
+          position: 'right'
         },
         {
-          to: 'introduction/quick-start',
-          label: 'Quick Start',
+          to: 'tutorials/connect',
+          label: 'Tutorial',
           position: 'right'
         },
         {
@@ -122,7 +97,7 @@ const siteConfig = {
           className: 'github'
         },
         {
-          href: '/introduction/quick-start#help-and-discussion',
+          href: '/introduction/getting-started#help-and-discussion',
           label: 'Need help?',
           position: 'right'
         }
@@ -142,7 +117,7 @@ const siteConfig = {
           items: [
             {
               label: 'Introduction',
-              to: 'introduction/quick-start'
+              to: 'introduction/getting-started'
             },
             {
               label: 'Using React Redux',

website/_redirects

@@ -0,0 +1,23 @@
+module.exports = {
+  docs: {
+    Introduction: [
+      'introduction/getting-started',
+      'introduction/why-use-react-redux'
+    ],
+    Tutorials: ['tutorials/connect'],
+    'Using React Redux': [
+      'using-react-redux/usage-with-typescript',
+      'using-react-redux/connect-mapstate',
+      'using-react-redux/connect-mapdispatch',
+      'using-react-redux/accessing-store'
+    ],
+    'API Reference': [
+      'api/provider',
+      'api/hooks',
+      'api/connect',
+      'api/connect-advanced',
+      'api/batch'
+    ],
+    Guides: ['troubleshooting']
+  }
+}

website/docusaurus.config.js

@@ -27,7 +27,7 @@ const features = [
       <p>
         <strong>Designed to work with React's component model</strong>. You
         define how to extract the values your component needs from Redux, and
-        your component receives them as props.
+        your component updates automatically as needed.
       </p>
     ),
     image: <img src="img/noun_Check_1870817.svg" />,
@@ -37,9 +37,9 @@ const features = [
   {
     content: (
       <p>
-        Creates wrapper components that{' '}
-        <strong>manage the store interaction logic for you</strong>, so you
-        don't have to write it yourself.
+        Provides APIs that{' '}
+        <strong>enable your components to interact with the Redux store</strong>
+        , so you don't have to write that logic yourself.
       </p>
     ),
     image: <img src="img/noun_Box_1664404.svg" />,
@@ -128,7 +128,7 @@ function Home() {
                 'button button--secondary button--lg',
                 styles.getStarted
               )}
-              to={useBaseUrl('introduction/quick-start')}
+              to={useBaseUrl('introduction/getting-started')}
             >
               Get Started
             </Link>