Update Docusaurus to beta.0 and add "Learn Modern Redux" embed (#1724)

Author: markerikson

docs/api/Provider.md

@@ -3,8 +3,11 @@ id: provider
 title: Provider
 sidebar_label: Provider
 hide_title: true
+description: 'API > Provider: providing the Redux store to your React app'
 ---
 
+ 
+
 # `Provider`
 
 ## Overview
@@ -30,13 +33,10 @@ 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.
 
-
-
 ### 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.
 
-
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
@@ -54,4 +54,3 @@ ReactDOM.render(
   document.getElementById('root')
 )
 ```
-

docs/api/batch.md

@@ -3,15 +3,18 @@ id: batch
 title: batch
 sidebar_label: batch()
 hide_title: true
+description: 'API > batch: batching React rendering updates'
 ---
 
+ 
+
 # `batch()`
 
 ```js
 batch((fn: Function))
 ```
 
-*added in v7.0.0*
+_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.
 

docs/api/connect-advanced.md

@@ -3,8 +3,11 @@ id: connect-advanced
 title: connectAdvanced
 sidebar_label: connectAdvanced()
 hide_title: true
+description: 'API > connectAdvanced: customizing connect for advanced behavior'
 ---
 
+ 
+
 # `connectAdvanced()`
 
 ```js
@@ -19,11 +22,10 @@ Most applications will not need to use this, as the default behavior in `connect
 
 :::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.
+`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
 
 - `selectorFactory(dispatch, factoryOptions): selector(state, ownProps): props` \(_Function_): Initializes a selector function (during each instance's constructor). That selector function is called any time the connector component needs to compute new props, as a result of a store state change or receiving new props. The result of `selector` is expected to be a plain object, which is passed as the props to the wrapped component. If a consecutive call to `selector` returns the same object (`===`) as its previous call, the component will not be re-rendered. It's the responsibility of `selector` to return that previous object when appropriate.

docs/api/connect.md

@@ -3,8 +3,11 @@ id: connect
 title: Connect
 sidebar_label: connect()
 hide_title: true
+description: 'API > connect: a Higher-Order Component to interact with Redux'
 ---
 
+ 
+
 # `connect()`
 
 ## Overview
@@ -116,7 +119,7 @@ The second parameter is normally referred to as `ownProps` by convention.
 
 ```js
 // binds on component re-rendering
-<button onClick={() => this.props.toggleTodo(this.props.todoId)} />
+;<button onClick={() => this.props.toggleTodo(this.props.todoId)} />
 
 // binds on `props` change
 const mapDispatchToProps = (dispatch, ownProps) => ({
@@ -578,7 +581,6 @@ 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.

docs/api/hooks.md

@@ -3,13 +3,16 @@ id: hooks
 title: Hooks
 sidebar_label: Hooks
 hide_title: true
+description: 'API > Hooks: the `useSelector` and `useDispatch` hooks`'
 ---
 
+ 
+
 # 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 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'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 includes its own custom hook APIs, which allow your React components to subscribe to the Redux store and dispatch actions. 
+React Redux includes its own custom hook APIs, which allow your React components to subscribe to the Redux store and dispatch actions.
 
 :::tip
 
@@ -107,7 +110,7 @@ import React from 'react'
 import { useSelector } from 'react-redux'
 
 export const CounterComponent = () => {
-  const counter = useSelector(state => state.counter)
+  const counter = useSelector((state) => state.counter)
   return <div>{counter}</div>
 }
 ```
@@ -118,8 +121,8 @@ Using props via closure to determine what to extract:
 import React from 'react'
 import { useSelector } from 'react-redux'
 
-export const TodoListItem = props => {
-  const todo = useSelector(state => state.todos[props.id])
+export const TodoListItem = (props) => {
+  const todo = useSelector((state) => state.todos[props.id])
   return <div>{todo.text}</div>
 }
 ```
@@ -136,8 +139,8 @@ import { useSelector } from 'react-redux'
 import { createSelector } from 'reselect'
 
 const selectNumCompletedTodos = createSelector(
-  state => state.todos,
-  todos => todos.filter(todo => todo.completed).length
+  (state) => state.todos,
+  (todos) => todos.filter((todo) => todo.completed).length
 )
 
 export const CompletedTodosCounter = () => {
@@ -163,14 +166,14 @@ import { useSelector } from 'react-redux'
 import { createSelector } from 'reselect'
 
 const selectCompletedTodosCount = createSelector(
-  state => state.todos,
+  (state) => state.todos,
   (_, completed) => completed,
   (todos, completed) =>
-    todos.filter(todo => todo.completed === completed).length
+    todos.filter((todo) => todo.completed === completed).length
 )
 
 export const CompletedTodosCount = ({ completed }) => {
-  const matchingCount = useSelector(state =>
+  const matchingCount = useSelector((state) =>
     selectCompletedTodosCount(state, completed)
   )
 
@@ -196,16 +199,16 @@ import { createSelector } from 'reselect'
 
 const makeSelectCompletedTodosCount = () =>
   createSelector(
-    state => state.todos,
+    (state) => state.todos,
     (_, completed) => completed,
     (todos, completed) =>
-      todos.filter(todo => todo.completed === completed).length
+      todos.filter((todo) => todo.completed === completed).length
   )
 
 export const CompletedTodosCount = ({ completed }) => {
   const selectCompletedTodosCount = useMemo(makeSelectCompletedTodosCount, [])
 
-  const matchingCount = useSelector(state =>
+  const matchingCount = useSelector((state) =>
     selectCompletedTodosCount(state, completed)
   )
 

docs/introduction/getting-started.md

@@ -1,10 +1,16 @@
 ---
 id: getting-started
-title: Getting Started
+title: Getting Started with React Redux
 hide_title: true
 sidebar_label: Getting Started
+description: 'Introduction > Getting Started: First steps with React Redux'
 ---
 
+ 
+
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
+
 # 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.
@@ -15,10 +21,14 @@ React Redux 7.1+ requires **React 16.8.3 or later**, in order to make use of Rea
 
 ### 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/).
+The recommended way to start new apps with React and Redux is by using the [official Redux+JS template](https://github.com/reduxjs/cra-template-redux) or [Redux+TS template](https://github.com/reduxjs/cra-template-redux-typescript) for [Create React App](https://github.com/facebook/create-react-app), which takes advantage of **[Redux Toolkit](https://redux-toolkit.js.org/)** and React Redux's integration with React components.
 
-```sh
+```bash
+# Redux + Plain JS template
 npx create-react-app my-app --template redux
+
+# Redux + TypeScript template
+npx create-react-app my-app --template redux-typescript
 ```
 
 ### An Existing React App
@@ -35,19 +45,19 @@ 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:
+If you are using TypeScript, the React Redux types are maintained separately in DefinitelyTyped, but included as a dependency of the `react-redux` package, so they should be installed automatically. If you still need to install them manually, run:
 
 ```bash
 npm install @types/react-redux
 ```
 
-The code used for this example is based on the [official Redux template](https://github.com/reduxjs/cra-template-redux). Additionally, the same code template for TypeScript can be found [here](https://github.com/reduxjs/cra-template-redux-typescript).
+## API Overview
 
-## `Provider`
+### `Provider`
 
 React Redux includes a `<Provider />` component, which makes the Redux store available to the rest of your app:
 
-```js
+```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 
@@ -65,21 +75,21 @@ ReactDOM.render(
 )
 ```
 
-## Hooks
+### 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
+```jsx
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import {
   decrement,
   increment,
   incrementByAmount,
   incrementAsync,
-  selectCount
+  selectCount,
 } from './counterSlice'
 import styles from './Counter.module.css'
 
@@ -112,6 +122,19 @@ export function Counter() {
 }
 ```
 
+## Learning React Redux
+
+### Learn Modern Redux Livestream
+
+Redux maintainer Mark Erikson appeared on the "Learn with Jason" show to explain how we recommend using Redux today. The show includes a live-coded example app that shows how to use Redux Toolkit and React-Redux hooks with Typescript, as well as the new RTK Query data fetching APIs.
+
+See [the "Learn Modern Redux" show notes page](https://www.learnwithjason.dev/let-s-learn-modern-redux) for a transcript and links to the example app source.
+
+<LiteYouTubeEmbed 
+    id="9zySeP5vH9c"
+    title="Learn Modern Redux - Redux Toolkit, React-Redux Hooks, and RTK Query"
+/>
+
 ## 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!

docs/introduction/why-use-react-redux.md

@@ -3,8 +3,11 @@ id: why-use-react-redux
 title: Why Use React Redux?
 hide_title: true
 sidebar_label: Why Use React Redux?
+description: 'Introduction > Why Use React Redux: benefits of using React Redux in a React app'
 ---
 
+ 
+
 # Why Use React Redux?
 
 Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and React are commonly used together, they are independent of each other.

docs/troubleshooting.md

@@ -5,21 +5,20 @@ sidebar_label: Troubleshooting
 hide_title: true
 ---
 
+ 
+
 ## Troubleshooting
 
 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)**.
 
-
 ### My views aren’t updating!
 
 In short,
 
 - Reducers should never mutate state, they must return new objects, or React Redux won’t see the updates.
-- 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`).
-
-
+- 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`).
 
 ### Could not find "store" in either the context or props
 

docs/tutorials/connect.md

@@ -3,8 +3,11 @@ id: connect
 title: 'Tutorial: Connect API'
 hide_title: true
 sidebar_label: 'Tutorial: Connect API'
+description: 'Tutorials > Connect API: how to use the legacy connect API'
 ---
 
+ 
+
 # Tutorial: Using the `connect` API
 
 :::tip
@@ -13,6 +16,8 @@ We now recommend using [the React-Redux hooks API as the default](../api/hooks.m
 
 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.
 
+We're working on a new tutorial that will introduce the hooks APIs. Until then, we suggest reading [**Redux Fundamentals, Part 5: UI and React**](https://redux.js.org/tutorials/fundamentals/part-5-ui-react) for a hooks tutorial.
+
 :::
 
 To see how to use React Redux in practice, we’ll show a step-by-step example by creating a todo list app.