diff --git a/README.md b/README.md
index c6206af164..06c2c8fd1f 100644
--- a/README.md
+++ b/README.md
@@ -8,53 +8,53 @@ It helps you write applications that behave consistently, run in different envir
 You can use Redux together with [React](https://reactjs.org), or with any other view library.
 It is tiny (2kB, including dependencies).
 
-> **Note**: We are currently planning a rewrite of the Redux docs. Please take some time to **[fill out this survey on what content is most important in a docs site](https://docs.google.com/forms/d/e/1FAIpQLSfzIkY3fXZ8PrQKScYMK0YoEgALfAK2qQ0mOj1_ibKv2qDTuQ/viewform)**. Thanks!
-
 [![build status](https://img.shields.io/travis/reduxjs/redux/master.svg?style=flat-square)](https://travis-ci.org/reduxjs/redux)
 [![npm version](https://img.shields.io/npm/v/redux.svg?style=flat-square)](https://www.npmjs.com/package/redux)
 [![npm downloads](https://img.shields.io/npm/dm/redux.svg?style=flat-square)](https://www.npmjs.com/package/redux)
 [![redux channel on discord](https://img.shields.io/badge/discord-%23redux%20%40%20reactiflux-61dafb.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bZ6au5t)
 [![Changelog #187](https://img.shields.io/badge/changelog-%23187-lightgrey.svg?style=flat-square)](https://changelog.com/187)
 
-## Learn Redux
+## Installation
 
-We have a variety of resources available to help you learn Redux, no matter what your background or learning style is.
+```
+npm install @reduxjs/toolkit react-redux
+```
 
-### Just the Basics
+For more details, see [the Installation docs page](https://redux.js.org/introduction/installation).
 
-If you're brand new to Redux and want to understand the basic concepts, see:
+## Documentation
+
+The Redux docs are located at **https://redux.js.org**:
 
-- The **[Motivation](https://redux.js.org/introduction/motivation)** behind building Redux, the **[Core Concepts](https://redux.js.org/introduction/core-concepts)**, and the **[Three Principles](https://redux.js.org/introduction/three-principles)**.
-- The **[basic tutorial in the Redux docs](https://redux.js.org/basics/basic-tutorial)**
-- Redux creator Dan Abramov's **free ["Getting Started with Redux" video series](https://egghead.io/series/getting-started-with-redux)** on Egghead.io
-- Redux co-maintainer Mark Erikson's **["Redux Fundamentals" slideshow](http://blog.isquaredsoftware.com/2018/03/presentation-reactathon-redux-fundamentals/)** and **[list of suggested resources for learning Redux](http://blog.isquaredsoftware.com/2017/12/blogged-answers-learn-redux/)**
-- If you learn best by looking at code and playing with it, check out our list of **[Redux example applications](https://redux.js.org/introduction/examples)**, available as separate projects in the Redux repo, and also as interactive online examples on CodeSandbox.
-- The **[Redux Tutorials](https://github.com/markerikson/react-redux-links/blob/master/redux-tutorials.md)** section of the **[React/Redux links list](https://github.com/markerikson/react-redux-links)**. Here's a top list of our recommended tutorials:
-  - Dave Ceddia's posts [What Does Redux Do? (and when should you use it?)](https://daveceddia.com/what-does-redux-do/) and [How Redux Works: A Counter-Example](https://daveceddia.com/how-does-redux-work/) are a great intro to the basics of Redux and how to use it with React, as is this post on [React and Redux: An Introduction](http://jakesidsmith.com/blog/post/2017-11-18-redux-and-react-an-introduction/).
-  - Valentino Gagliardi's post [React Redux Tutorial for Beginners: Learning Redux in 2018](https://www.valentinog.com/blog/react-redux-tutorial-beginners/) is an excellent extended introduction to many aspects of using Redux.
-  - The CSS Tricks article [Leveling Up with React: Redux](https://css-tricks.com/learning-react-redux/) covers the Redux basics well.
-  - This [DevGuides: Introduction to Redux](http://devguides.io/redux/) tutorial covers several aspects of Redux, including actions, reducers, usage with React, and middleware.
+- [Introduction](http://redux.js.org/introduction/getting-started)
+- [Recipes](http://redux.js.org/recipes/recipe-index)
+- [FAQ](http://redux.js.org/faq)
+- [API Reference](https://redux.js.org/api/api-reference)
+
+For PDF, ePub, and MOBI exports for offline reading, and instructions on how to create them, please see: [paulkogel/redux-offline-docs](https://github.com/paulkogel/redux-offline-docs).
+
+For Offline docs, please see: [devdocs](http://devdocs.io/redux/)
+
+## Learn Redux
 
-### Intermediate Concepts
+### Redux Essentials Tutorial
 
-Once you've picked up the basics of working with actions, reducers, and the store, you may have questions about topics like working with asynchronous logic and AJAX requests, connecting a UI framework like React to your Redux store, and setting up an application to use Redux:
+The [**Redux Essentials tutorial**](https://redux.js.org/tutorials/essentials/part-1-overview-concepts) is a "top-down" tutorial that teaches how to use Redux the right way, using our latest recommended APIs and best practices. We recommend starting there.
 
-- The **["Advanced" docs section](https://redux.js.org/advanced/advanced-tutorial)** covers working with async logic, middleware, routing.
-- The Redux docs **["Learning Resources"](https://redux.js.org/introduction/learning-resources)** page points to recommended articles on a variety of Redux-related topics.
-- Sophie DeBenedetto's 8-part **[Building a Simple CRUD App with React + Redux](http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/)** series shows how to put together a basic CRUD app from scratch.
+### Additional Tutorials
 
-### Real-World Usage
+- The Redux docs [**Basic tutorial**](https://redux.js.org/basics/basic-tutorial) and [**Advanced tutorial**](https://redux.js.org/advanced/advanced-tutorial) are a "bottom-up" tutorial that teaches how Redux works, starting from first principles.
+- The Redux repository contains several example projects demonstrating various aspects of how to use Redux. Almost all examples have a corresponding CodeSandbox sandbox. This is an interactive version of the code that you can play with online. See the complete list of examples in the **[Examples page](https://redux.js.org/introduction/examples)**.
+- Redux creator Dan Abramov's **free ["Getting Started with Redux" video series](https://egghead.io/series/getting-started-with-redux)** and **[Building React Applications with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)** video courses on Egghead.io
+- Redux maintainer Mark Erikson's **["Redux Fundamentals" conference talk](http://blog.isquaredsoftware.com/2018/03/presentation-reactathon-redux-fundamentals/)** and [**"Redux Fundamentals" workshop slides**](https://blog.isquaredsoftware.com/2018/06/redux-fundamentals-workshop-slides/)
+- Dave Ceddia's post [**A Complete React Redux Tutorial for Beginners**](https://daveceddia.com/redux-tutorial/)
 
-Going from a TodoMVC app to a real production application can be a big jump, but we've got plenty of resources to help:
+### Other Resources
 
-- Redux creator Dan Abramov's **[free "Building React Applications with Idiomatic Redux" video series](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)** builds on his first video series and covers topics like middleware, routing, and persistence.
-- The **[Redux FAQ](https://redux.js.org/faq)** answers many common questions about how to use Redux, and the **["Recipes" docs section](https://redux.js.org/recipes)** has information on handling derived data, testing, structuring reducer logic, and reducing boilerplate.
-- Redux co-maintainer Mark Erikson's **["Practical Redux" tutorial series](http://blog.isquaredsoftware.com/series/practical-redux/)** demonstrates real-world intermediate and advanced techniques for working with React and Redux (also available as **[an interactive course on Educative.io](https://www.educative.io/collection/5687753853370368/5707702298738688)**).
+- The **[Redux FAQ](https://redux.js.org/faq)** answers many common questions about how to use Redux, and the **["Recipes" docs section](https://redux.js.org/recipes/recipe-index)** has information on handling derived data, testing, structuring reducer logic, and reducing boilerplate.
+- Redux maintainer Mark Erikson's **["Practical Redux" tutorial series](http://blog.isquaredsoftware.com/series/practical-redux/)** demonstrates real-world intermediate and advanced techniques for working with React and Redux (also available as **[an interactive course on Educative.io](https://www.educative.io/collection/5687753853370368/5707702298738688)**).
 - The **[React/Redux links list](https://github.com/markerikson/react-redux-links)** has categorized articles on working with [reducers and selectors](https://github.com/markerikson/react-redux-links/blob/master/redux-reducers-selectors.md), [managing side effects](https://github.com/markerikson/react-redux-links/blob/master/redux-side-effects.md), [Redux architecture and best practices](https://github.com/markerikson/react-redux-links/blob/master/redux-architecture.md), and more.
 - Our community has created thousands of Redux-related libraries, addons, and tools. The **["Ecosystem" docs page](https://redux.js.org/introduction/ecosystem)** lists our recommendations, and there's a complete listing available in the **[Redux addons catalog](https://github.com/markerikson/redux-ecosystem-links)**.
-- If you're looking to learn from actual application codebases, the addons catalog also has a list of **[purpose-built examples and real-world applications](https://github.com/markerikson/redux-ecosystem-links/blob/master/apps-and-examples.md)**.
-
-Finally, Mark Erikson is teaching a series of **[Redux workshops through Workshop.me](#redux-workshops)**. Check the [workshop schedule](https://workshop.me/?a=mark) for upcoming dates and locations.
 
 ### Help and Discussion
 
@@ -88,35 +88,6 @@ Dan Abramov (author of Redux) wrote Redux while working on his React Europe talk
 Redux evolves the ideas of [Flux](http://facebook.github.io/flux/), but avoids its complexity by taking cues from [Elm](https://github.com/evancz/elm-architecture-tutorial/).
 Even if you haven't used Flux or Elm, Redux only takes a few minutes to get started with.
 
-## Installation
-
-To install the stable version:
-
-```sh
-npm install redux
-```
-
-This assumes you are using [npm](https://www.npmjs.com/) as your package manager.
-
-If you're not, you can [access these files on unpkg](https://unpkg.com/redux/), download them, or point your package manager to them.
-
-Most commonly, people consume Redux as a collection of [CommonJS](https://github.com/webpack/docs/wiki/commonjs) modules. These modules are what you get when you import `redux` in a [Webpack](https://webpack.js.org/), [Browserify](http://browserify.org/), or a Node environment. If you like to live on the edge and use [Rollup](https://rollupjs.org), we support that as well.
-
-If you don't use a module bundler, it's also fine. The `redux` npm package includes precompiled production and development [UMD](https://github.com/umdjs/umd) builds in the [`dist` folder](https://unpkg.com/redux/dist/). They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. For example, you can drop a UMD build as a [`<script>` tag](https://unpkg.com/redux/dist/redux.js) on the page, or [tell Bower to install it](https://github.com/reduxjs/redux/pull/1181#issuecomment-167361975). The UMD builds make Redux available as a `window.Redux` global variable.
-
-The Redux source code is written in ES2015 but we precompile both CommonJS and UMD builds to ES5 so they work in [any modern browser](http://caniuse.com/#feat=es5). You don't need to use Babel or a module bundler to [get started with Redux](https://github.com/reduxjs/redux/blob/master/examples/counter-vanilla/index.html). You can even use the ES module build that's available at [`es/redux.mjs`](https://unpkg.com/redux/es/) which can be referenced using `type="module"` in your `script` tag or as a standard `import`.
-
-### Complementary Packages
-
-Most likely, you'll also need [the React bindings](https://github.com/reduxjs/react-redux) and [the developer tools](https://github.com/reduxjs/redux-devtools).
-
-```sh
-npm install react-redux
-npm install --save-dev redux-devtools
-```
-
-Note that unlike Redux itself, many packages in the Redux ecosystem don't provide UMD builds, so we recommend using CommonJS module bundlers like [Webpack](https://webpack.js.org/) and [Browserify](http://browserify.org/) for the most comfortable development experience.
-
 ## The Gist
 
 The whole state of your app is stored in an object tree inside a single _store_.
@@ -173,87 +144,8 @@ store.dispatch({ type: 'DECREMENT' })
 
 Instead of mutating the state directly, you specify the mutations you want to happen with plain objects called _actions_. Then you write a special function called a _reducer_ to decide how every action transforms the entire application's state.
 
-If you're coming from Flux, there is a single important difference you need to understand. Redux doesn't have a Dispatcher or support many stores. Instead, there is just a single store with a single root reducing function. As your app grows, instead of adding stores, you split the root reducer into smaller reducers independently operating on the different parts of the state tree. This is exactly like how there is just one root component in a React app, but it is composed out of many small components.
-
 This architecture might seem like an overkill for a counter app, but the beauty of this pattern is how well it scales to large and complex apps. It also enables very powerful developer tools, because it is possible to trace every mutation to the action that caused it. You can record user sessions and reproduce them just by replaying every action.
 
-## Learn Redux from Its Authors
-
-### Redux Video Tutorials by Dan Abramov
-
-#### Getting Started with Redux
-
-**[Getting Started with Redux](https://egghead.io/series/getting-started-with-redux)** is a video course consisting of 30 videos narrated by [Dan Abramov](https://twitter.com/dan_abramov), author of Redux. It is designed to complement the “Basics” part of the docs while bringing additional insights about immutability, testing, Redux best practices, and using Redux with React. **This course is free and will always be.**
-
-> [“Great course on egghead.io by @dan_abramov - instead of just showing you how to use #redux, it also shows how and why redux was built!”](https://twitter.com/sandrinodm/status/670548531422326785)
-> Sandrino Di Mattia
-
-> [“Plowing through @dan_abramov 'Getting Started with Redux' - its amazing how much simpler concepts get with video.”](https://twitter.com/chrisdhanaraj/status/670328025553219584)
-> Chris Dhanaraj
-
-> [“This video series on Redux by @dan_abramov on @eggheadio is spectacular!”](https://twitter.com/eddiezane/status/670333133242408960)
-> Eddie Zaneski
-
-> [“Come for the name hype. Stay for the rock solid fundamentals. (Thanks, and great job @dan_abramov and @eggheadio!)”](https://twitter.com/danott/status/669909126554607617)
-> Dan
-
-> [“This series of videos on Redux by @dan_abramov is repeatedly blowing my mind - gunna do some serious refactoring”](https://twitter.com/gelatindesign/status/669658358643892224)
-> Laurence Roberts
-
-So, what are you waiting for?
-
-#### [Watch the free "Getting Started with Redux" video series](https://egghead.io/series/getting-started-with-redux)
-
-> Note: If you enjoyed Dan's course, consider supporting Egghead by [buying a subscription](https://egghead.io/pricing). Subscribers have access to the source code of every example in my videos and tons of advanced lessons on other topics, including JavaScript in depth, React, Angular, and more. Many [Egghead instructors](https://egghead.io/instructors) are also open source library authors, so buying a subscription is a nice way to thank them for the work that they've done.
-
-#### Building React Applications with Idiomatic Redux
-
-The **[Building React Applications with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)** course is a second free video series by Dan Abramov. It picks up where the first series left off, and covers practical production ready techniques for building your React and Redux applications: advanced state management, middleware, React Router integration, and other common problems you are likely to encounter while building applications for your clients and customers. As with the first series, **this course will always be free**.
-
-#### [Watch the free "Idiomatic Redux" video series](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)
-
-### Practical Redux course
-
-**[Practical Redux](https://www.educative.io/collection/5687753853370368/5707702298738688/)** is a paid interactive course by Redux co-maintainer [Mark Erikson](https://twitter.com/acemarke). The course is designed to show how to apply the basic concepts of Redux to building something larger than a TodoMVC application. It includes real-world topics like:
-
-- Adding Redux to a new Create-React-App project and configuring Hot Module Replacement for faster development
-- Controlling your UI behavior with Redux
-- Using the Redux-ORM library to manage relational data in your Redux store
-- Building a master/detail view to display and edit data
-- Writing custom advanced Redux reducer logic to solve specific problems
-- Optimizing performance of Redux-connected form inputs
-
-And much more!
-
-The course is based on Mark's original free **["Practical Redux" blog tutorial series](http://blog.isquaredsoftware.com/series/practical-redux/)**, but with updated and improved content.
-
-### Redux Fundamentals Workshop
-
-Redux co-maintainer [Mark Erikson](https://twitter.com/acemarke) has put together a [**Redux Fundamentals workshop**, and slides are available here](https://blog.isquaredsoftware.com/2018/06/redux-fundamentals-workshop-slides/). They cover:
-
-- The history and purpose of Redux
-- Reducers and actions, and working with a Redux store
-- Using Redux with React
-- Using and writing Redux middleware
-- Working with AJAX calls and other side effects
-- Unit testing Redux apps
-- Real-world Redux app structure and development
-
-## Documentation
-
-- [Introduction](http://redux.js.org/introduction/getting-started)
-- [Basics](http://redux.js.org/basics/basic-tutorial)
-- [Advanced](http://redux.js.org/advanced/advanced-tutorial)
-- [Recipes](http://redux.js.org/recipes/recipe-index)
-- [FAQ](http://redux.js.org/faq)
-- [Troubleshooting](http://redux.js.org/troubleshooting)
-- [Glossary](http://redux.js.org/glossary)
-- [API Reference](https://redux.js.org/api/api-reference)
-
-For PDF, ePub, and MOBI exports for offline reading, and instructions on how to create them, please see: [paulkogel/redux-offline-docs](https://github.com/paulkogel/redux-offline-docs).
-
-For Offline docs, please see: [devdocs](http://devdocs.io/redux/)
-
 ## Examples
 
 Almost all examples have a corresponding CodeSandbox sandbox. This is an interactive version of the code that you can play with online.
diff --git a/docs/components/DetailedExplanation.jsx b/docs/components/DetailedExplanation.jsx
new file mode 100644
index 0000000000..b3701555ee
--- /dev/null
+++ b/docs/components/DetailedExplanation.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+export const DetailedExplanation = ({
+  children,
+  title = 'Detailed Explanation'
+}) => {
+  return (
+    <details className="detailed-explanation">
+      <summary>
+        <h4>{title}</h4>
+      </summary>
+      {children}
+    </details>
+  )
+}
diff --git a/docs/introduction/GettingStarted.md b/docs/introduction/GettingStarted.md
index c1009f2284..73670ac005 100644
--- a/docs/introduction/GettingStarted.md
+++ b/docs/introduction/GettingStarted.md
@@ -1,7 +1,7 @@
 ---
 id: getting-started
 title: Getting Started with Redux
-description: 'Introduction : Getting Started: Resources to get started learning and using Redux'
+description: 'Introduction > Getting Started: Resources to get started learning and using Redux'
 hide_title: true
 ---
 
@@ -15,25 +15,9 @@ You can use Redux together with [React](https://reactjs.org), or with any other
 
 ## Installation
 
-Redux is available as a package on NPM for use with a module bundler or in a Node application:
+### Redux Toolkit
 
-```bash
-# NPM
-npm install redux
-
-# Yarn
-yarn add redux
-```
-
-It is also available as a precompiled UMD package that defines a `window.Redux` global variable. The UMD package can be used as a [`<script>` tag](https://unpkg.com/redux/dist/redux.js) directly.
-
-For more details, see the [Installation](Installation.md) page.
-
-## Redux Toolkit
-
-Redux itself is small and unopinionated. We also have a separate addon package called **[Redux Toolkit](https://redux-toolkit.js.org/)**,
-which includes some opinionated defaults that help you use Redux more effectively. It's our official recommended approach
-for writing Redux logic.
+[**Redux Toolkit**](https://redux-toolkit.js.org) is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.
 
 RTK includes utilities that help simplify many common use cases, including [store setup](https://redux-toolkit.js.org/api/configureStore),
 [creating reducers and writing immutable update logic](https://redux-toolkit.js.org/api/createreducer),
@@ -43,7 +27,17 @@ Whether you're a brand new Redux user setting up your first project, or an exper
 simplify an existing application, **[Redux Toolkit](https://redux-toolkit.js.org/)** can help you
 make your Redux code better.
 
-## Create a React Redux App
+Redux Toolkit is available as a package on NPM for use with a module bundler or in a Node application:
+
+```bash
+# NPM
+npm install @reduxjs/toolkit
+
+# Yarn
+yarn add @reduxjs/toolkit
+```
+
+### Create a React Redux App
 
 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) 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.
 
@@ -51,6 +45,22 @@ The recommended way to start new apps with React and Redux is by using the [offi
 npx create-react-app my-app --template redux
 ```
 
+### Redux Core
+
+The Redux core library is available as a package on NPM for use with a module bundler or in a Node application:
+
+```bash
+# NPM
+npm install redux
+
+# Yarn
+yarn add redux
+```
+
+It is also available as a precompiled UMD package that defines a `window.Redux` global variable. The UMD package can be used as a [`<script>` tag](https://unpkg.com/redux/dist/redux.js) directly.
+
+For more details, see the [Installation](Installation.md) page.
+
 ## Basic Example
 
 The whole state of your app is stored in an object tree inside a single _store_.
@@ -111,49 +121,28 @@ In a typical Redux app, there is just a single store with a single root reducing
 
 This architecture might seem like an overkill for a counter app, but the beauty of this pattern is how well it scales to large and complex apps. It also enables very powerful developer tools, because it is possible to trace every mutation to the action that caused it. You can record user sessions and reproduce them just by replaying every action.
 
-## Example Projects
-
-The Redux repository contains several example projects demonstrating various aspects of how to use Redux. Almost all examples have a corresponding CodeSandbox sandbox. This is an interactive version of the code that you can play with online.
-
-See the complete list of examples in the **[Examples page](./Examples.md)**.
-
 ## Learn Redux
 
-We have a variety of resources available to help you learn Redux, no matter what your background or learning style is.
-
-### Just the Basics
-
-If you're brand new to Redux and want to understand the basic concepts, see:
-
-- The **[Motivation](./Motivation.md)** behind building Redux, the **[Core Concepts](./CoreConcepts.md)**, and the **[Three Principles](./ThreePrinciples.md)**.
-- The **[basic tutorial in the Redux docs](../basics/README.md)**
-- Redux creator Dan Abramov's **free ["Getting Started with Redux" video series](https://egghead.io/series/getting-started-with-redux)** on Egghead.io
-- Redux co-maintainer Mark Erikson's **["Redux Fundamentals" slideshow](http://blog.isquaredsoftware.com/2018/03/presentation-reactathon-redux-fundamentals/)** and **[list of suggested resources for learning Redux](http://blog.isquaredsoftware.com/2017/12/blogged-answers-learn-redux/)**
-- If you learn best by looking at code and playing with it, check out our list of **[Redux example applications](./Examples.md)**, available as separate projects in the Redux repo, and also as interactive online examples on CodeSandbox.
-- The **[Redux Tutorials](https://github.com/markerikson/react-redux-links/blob/master/redux-tutorials.md)** section of the **[React/Redux links list](https://github.com/markerikson/react-redux-links)**. Here's a top list of our recommended tutorials:
-  - Dave Ceddia's posts [What Does Redux Do? (and when should you use it?)](https://daveceddia.com/what-does-redux-do/) and [How Redux Works: A Counter-Example](https://daveceddia.com/how-does-redux-work/) are a great intro to the basics of Redux and how to use it with React, as is this post on [React and Redux: An Introduction](http://jakesidsmith.com/blog/post/2017-11-18-redux-and-react-an-introduction/).
-  - Valentino Gagliardi's post [React Redux Tutorial for Beginners: Learning Redux in 2018](https://www.valentinog.com/blog/react-redux-tutorial-beginners/) is an excellent extended introduction to many aspects of using Redux.
-  - The CSS Tricks article [Leveling Up with React: Redux](https://css-tricks.com/learning-react-redux/) covers the Redux basics well.
-  - This [DevGuides: Introduction to Redux](http://devguides.io/redux/) tutorial covers several aspects of Redux, including actions, reducers, usage with React, and middleware.
+We have a variety of resources available to help you learn Redux.
 
-### Intermediate Concepts
+### Redux Essentials Tutorial
 
-Once you've picked up the basics of working with actions, reducers, and the store, you may have questions about topics like working with asynchronous logic and AJAX requests, connecting a UI framework like React to your Redux store, and setting up an application to use Redux:
+The [**Redux Essentials tutorial**](../tutorials/essentials/part-1-overview-concepts.md) is a "top-down" tutorial that teaches how to use Redux the right way, using our latest recommended APIs and best practices. We recommend starting there.
 
-- The **["Advanced" docs section](../advanced/README.md)** covers working with async logic, middleware, routing.
-- The Redux docs **["Learning Resources"](./LearningResources.md)** page points to recommended articles on a variety of Redux-related topics.
-- Sophie DeBenedetto's 8-part **[Building a Simple CRUD App with React + Redux](http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/)** series shows how to put together a basic CRUD app from scratch.
+### Additional Tutorials
 
-### Real-World Usage
+- The Redux docs [**Basic tutorial**](../basics/README.md) and [**Advanced tutorial**](../advanced/README.md) are a "bottom-up" tutorial that teaches how Redux works, starting from first principles.
+- The Redux repository contains several example projects demonstrating various aspects of how to use Redux. Almost all examples have a corresponding CodeSandbox sandbox. This is an interactive version of the code that you can play with online. See the complete list of examples in the **[Examples page](./Examples.md)**.
+- Redux creator Dan Abramov's **free ["Getting Started with Redux" video series](https://egghead.io/series/getting-started-with-redux)** and **[Building React Applications with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)** video courses on Egghead.io
+- Redux maintainer Mark Erikson's **["Redux Fundamentals" conference talk](http://blog.isquaredsoftware.com/2018/03/presentation-reactathon-redux-fundamentals/)** and [**"Redux Fundamentals" workshop slides**](https://blog.isquaredsoftware.com/2018/06/redux-fundamentals-workshop-slides/)
+- Dave Ceddia's post [**A Complete React Redux Tutorial for Beginners**](https://daveceddia.com/redux-tutorial/)
 
-Going from a TodoMVC app to a real production application can be a big jump, but we've got plenty of resources to help:
+### Other Resources
 
-- Redux creator Dan Abramov's **[free "Building React Applications with Idiomatic Redux" video series](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)** builds on his first video series and covers topics like middleware, routing, and persistence.
 - The **[Redux FAQ](../FAQ.md)** answers many common questions about how to use Redux, and the **["Recipes" docs section](../recipes/README.md)** has information on handling derived data, testing, structuring reducer logic, and reducing boilerplate.
-- Redux co-maintainer Mark Erikson's **["Practical Redux" tutorial series](http://blog.isquaredsoftware.com/series/practical-redux/)** demonstrates real-world intermediate and advanced techniques for working with React and Redux (also available as **[an interactive course on Educative.io](https://www.educative.io/collection/5687753853370368/5707702298738688)**).
+- Redux maintainer Mark Erikson's **["Practical Redux" tutorial series](http://blog.isquaredsoftware.com/series/practical-redux/)** demonstrates real-world intermediate and advanced techniques for working with React and Redux (also available as **[an interactive course on Educative.io](https://www.educative.io/collection/5687753853370368/5707702298738688)**).
 - The **[React/Redux links list](https://github.com/markerikson/react-redux-links)** has categorized articles on working with [reducers and selectors](https://github.com/markerikson/react-redux-links/blob/master/redux-reducers-selectors.md), [managing side effects](https://github.com/markerikson/react-redux-links/blob/master/redux-side-effects.md), [Redux architecture and best practices](https://github.com/markerikson/react-redux-links/blob/master/redux-architecture.md), and more.
 - Our community has created thousands of Redux-related libraries, addons, and tools. The **["Ecosystem" docs page](./Ecosystem.md)** lists our recommendations, and there's a complete listing available in the **[Redux addons catalog](https://github.com/markerikson/redux-ecosystem-links)**.
-- If you're looking to learn from actual application codebases, the addons catalog also has a list of **[purpose-built examples and real-world applications](https://github.com/markerikson/redux-ecosystem-links/blob/master/apps-and-examples.md)**.
 
 ## Help and Discussion
 
diff --git a/docs/introduction/Installation.md b/docs/introduction/Installation.md
index 9a0017b53b..e18271509f 100644
--- a/docs/introduction/Installation.md
+++ b/docs/introduction/Installation.md
@@ -7,13 +7,33 @@ hide_title: true
 
 # Installation
 
+## Redux Toolkit
+
+Redux Toolkit includes the Redux core, as well as other key packages we feel are essential for building Redux applications (such as Redux Thunk and Reselect).
+
+It's available as a package on NPM for use with a module bundler or in a Node application:
+
+```bash
+# NPM
+npm install @reduxjs/toolkit
+
+# Yarn
+yarn add @reduxjs/toolkit
+```
+
+It's also available as a UMD build, which can be loaded from [the `dist` folder on unpkg](https://unpkg.com/@reduxjs/toolkit/dist/). The UMD builds make Redux Toolkit available as a `window.RTK` global variable.
+
+## Redux Core
+
 To install the stable version:
 
 ```bash
+# NPM
 npm install redux
-```
 
-This assumes you are using [npm](https://www.npmjs.com/) as your package manager.
+# Yarn
+yarn add redux
+```
 
 If you're not, you can [access these files on unpkg](https://unpkg.com/redux/), download them, or point your package manager to them.
 
diff --git a/docs/style-guide/style-guide.md b/docs/style-guide/style-guide.md
index a0c4ec513d..d626d6f8aa 100644
--- a/docs/style-guide/style-guide.md
+++ b/docs/style-guide/style-guide.md
@@ -3,6 +3,7 @@ id: style-guide
 title: Style Guide
 description: 'Redux Style Guide: recommended patterns and best practices for using Redux'
 hide_title: true
+sidebar_label: 'Style Guide: Best Practices'
 ---
 
 <div class="style-guide">
diff --git a/docs/tutorials/essentials/part-1-overview-concepts.md b/docs/tutorials/essentials/part-1-overview-concepts.md
new file mode 100644
index 0000000000..a4df5f1f29
--- /dev/null
+++ b/docs/tutorials/essentials/part-1-overview-concepts.md
@@ -0,0 +1,465 @@
+---
+id: part-1-overview-concepts
+title: 'Redux Essentials, Part 1: Redux Overview and Concepts'
+sidebar_label: 'Redux Overview and Concepts'
+hide_title: true
+description: 'The official Essentials tutorial for Redux: how to use Redux the right way'
+---
+
+import { DetailedExplanation } from '../../components/DetailedExplanation'
+
+# Redux Essentials, Part 1: Redux Overview and Concepts
+
+:::tip What You'll Learn
+
+- What Redux is and why you might want to use it
+- Key Redux terms and concepts
+- How data flows through a Redux app
+
+:::
+
+## Introduction
+
+Welcome to the Redux Essentials tutorial! **This tutorial will introduce you to Redux and teach you how to use it the right way, using our latest recommended tools and best practices**. By the time you finish, you should be able to start building your own Redux applications using the tools and patterns you've learned here.
+
+In Part 1 of this tutorial, we'll cover the key concepts and terms you need to know to use Redux, and in [Part 2](./part-2-app-structure.md) we'll examine a basic React + Redux app to see how the pieces fit together.
+
+Starting in [Part 3](./part-3-data-flow.md), we'll use that knowledge to build a small social media feed app with some real-world features, see how those pieces actually work in practice, and talk about some important patterns and guidelines for using Redux.
+
+### How to Read This Tutorial
+
+This page will focus on showing you _how_ to use Redux the right way, and explain just enough of the concepts so that you can understand how to build Redux apps correctly.
+
+We've tried to keep these explanations beginner-friendly, but we do need to make some assumptions about what you know already:
+
+:::important Prerequisites
+
+- Familiarity with [HTML & CSS](https://internetingishard.com/).
+- Familiarity with [ES6 syntax and features](https://www.taniarascia.com/es6-syntax-and-feature-overview/)
+- Knowledge of React terminology: [JSX](https://reactjs.org/docs/introducing-jsx.html), [State](https://reactjs.org/docs/state-and-lifecycle.html), [Function Components, Props](https://reactjs.org/docs/components-and-props.html), and [Hooks](https://reactjs.org/docs/hooks-intro.html)
+- Knowledge of [asynchronous JavaScript](https://javascript.info/promise-basics) and [making AJAX requests](https://javascript.info/fetch)
+
+:::
+
+**If you're not already comfortable with those topics, we encourage you to take some time to become comfortable with them first, and then come back to learn about Redux**. We'll be here when you're ready!
+
+You should make sure that you have the React and Redux DevTools extensions installed in your browser:
+
+- React DevTools Extension:
+  - [React DevTools Extension for Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
+  - [React DevTools Extension for Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
+- Redux DevTools Extension:
+  - [Redux DevTools Extension for Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)
+  - [Redux DevTools Extension for Firefox](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/)
+
+## What is Redux?
+
+It helps to understand what this "Redux" thing is in the first place. What does it do? What problems does it help me solve? Why would I want to use it?
+
+**Redux is a pattern and library for managing and updating application state, using events called "actions".** It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.
+
+### Why Should I Use Redux?
+
+Redux helps you manage "global" state - state that is needed across many parts of your application.
+
+**The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur**. Redux guides you towards writing code that is predictable and testable, which helps give you confidence that your application will work as expected.
+
+### When Should I Use Redux?
+
+Redux helps you deal with shared state management, but like any tool, it has tradeoffs. There's more concepts to learn, and more code to write. It also adds some indirection to your code, and asks you to follow certain restrictions. It's a trade-off between short term and long term productivity.
+
+Redux is more useful when:
+
+- You have large amounts of application state that are needed in many places in the app
+- The app state is updated frequently over time
+- The logic to update that state may be complex
+- The app has a medium or large-sized codebase, and might be worked on by many people
+
+**Not all apps need Redux. Take some time to think about the kind of app you're building, and decide what tools would be best to help solve the problems you're working on.**
+
+:::info Want to Know More?
+
+If you're not sure whether Redux is a good choice for your app, these resources give some more guidance:
+
+- **[Redux FAQ: When should I use Redux?](../faq/General.md#when-should-i-use-redux)**
+- **[You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367)**
+- **[The Tao of Redux, Part 1 - Implementation and Intent](http://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/)**
+
+:::
+
+### Redux Libraries and Tools
+
+Redux is a small standalone JS library. However, it is commonly used with several other packages:
+
+#### React-Redux
+
+Redux can integrate with any UI framework, and is most frequently used with React. [**React-Redux**](https://react-redux.js.org/) is our official package that lets your React components interact with a Redux store by reading pieces of state and dispatching actions to update the store.
+
+#### Redux Toolkit
+
+[**Redux Toolkit**](https://redux-toolkit.js.org) is our recommended approach for writing Redux logic. It contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.
+
+#### Redux DevTools Extension
+
+The [**Redux DevTools Extension**](https://github.com/zalmoxisus/redux-devtools-extension) shows a history of the changes to the state in your Redux store over time. This allows you to debug your applications effectively, including using powerful techniques like "time-travel debugging".
+
+## Redux Terms and Concepts
+
+Before we dive into some actual code, let's talk about some of the terms and concepts you'll need to know to use Redux.
+
+### State Management
+
+Let's start by looking at a small React counter component. It tracks a number in component state, and increments the number when a button is clicked:
+
+```jsx
+function Counter() {
+  // State: a counter value
+  const [counter, setCounter] = useState(0)
+
+  // Action: code that causes an update to the state when something happens
+  const increment = () => {
+    setCounter(prevCounter => prevCounter + 1)
+  }
+
+  // View: the UI definition
+  return (
+    <div>
+      Value: {counter} <button onClick={increment}>Increment</button>
+    </div>
+  )
+}
+```
+
+It is a self-contained app with the following parts:
+
+- The **state**, the source of truth that drives our app;
+- The **view**, a declarative description of the UI based on the current state
+- The **actions**, the events that occur in the app based on user input, and trigger updates in the state
+
+This is a small example of **"one-way data flow"**:
+
+- State describes the condition of the app at a specific point in time
+- The UI is rendered based on that state
+- When something happens (such as a user clicking a button), the state is updated based on what occurred
+- The UI re-renders based on the new state
+
+![One-way data flow](/img/tutorials/essentials/one-way-data-flow.png)
+
+However, the simplicity can break down when we have **multiple components that need to share and use the same state**, especially if those components are located in different parts of the application. Sometimes this can be solved by ["lifting state up"](https://reactjs.org/docs/lifting-state-up.html) to parent components, but that doesn't always help.
+
+One way to solve this is to extract the shared state from the components, and put it into a centralized location outside the component tree. With this, our component tree becomes a big "view", and any component can access the state or trigger actions, no matter where they are in the tree!
+
+By defining and separating the concepts involved in state management and enforcing rules that maintain independence between views and states, we give our code more structure and maintainability.
+
+This is the basic idea behind Redux: a single centralized place to contain the global state in your application, and specific patterns to follow when updating that state to make the code predictable.
+
+### Immutability
+
+"Mutable" means "changeable". If something is "immutable", it can never be changed.
+
+JavaScript objects and arrays are all mutable by default. If I create an object, I can change the contents of its fields. If I create an array, I can change the contents as well:
+
+```js
+const obj = { a: 1, b: 2 }
+// still the same object outside, but the contents have changed
+obj.b = 3
+
+const arr = ['a', 'b']
+// In the same way, we can change the contents of this array
+arr.push('c')
+arr[1] = 'd'
+```
+
+This is called _mutating_ the object or array. It's the same object or array reference in memory, but now the contents inside the object have changed.
+
+**In order to update values immutably, your code must make _copies_ of existing objects/arrays, and then modify the copies**.
+
+We can do this by hand using JavaScript's array / object spread operators, as well as array methods that return new copies of the array instead of mutating the original array:
+
+```js
+const obj1 = {
+  a: {
+    // To safely update obj.a.c, we have to copy each piece
+    c: 3
+  }
+  b: 2,
+}
+
+
+const obj2 = {
+  // copy obj
+  ...obj
+  // overwrite a
+  a: {
+    // copy obj.a
+    ...obj.a,
+    // overwrite c
+    c: 42
+  }
+}
+
+const arr = ["a", "b"];
+// Create a new copy of arr, with "c" appended to the end
+const arr2 = arr.concat("c");
+
+// or, we can make a copy of the original array:
+const arr3 = arr.slice();
+// and mutate the copy:
+arr3.push("c");
+```
+
+**Redux expects that all state updates are done immutably**. We'll look at where and how this is important a bit later, as well as some easier ways to write immutable update logic.
+
+:::info Want to Know More?
+
+For more info on how immutability works in JavaScript, see:
+
+- [A Visual Guide to References in JavaScript](https://daveceddia.com/javascript-references/)
+- [Immutability in React and Redux: The Complete Guide](https://daveceddia.com/react-redux-immutability-guide/)
+
+:::
+
+### Terminology
+
+There's some important Redux terms that you'll need to be familiar with before we continue:
+
+#### Actions
+
+An **action** is a plain JavaScript object that has a `type` field. **You can think of an action as an event that describes something that happened in the application**.
+
+The `type` field should be a string that gives this action a descriptive name, like `"todos/todoAdded"`. We usually write that type string like `"domain/eventName"`, where the first part is the feature or category that this action belongs to, and the second part is the specific thing that happened.
+
+An action object can have other fields with additional information about what happened. By convention, we put that information in a field called `payload`.
+
+A typical action object might look like this:
+
+```js
+const addTodoAction = {
+  type: 'todos/todoAdded',
+  payload: 'Buy milk'
+}
+```
+
+#### Action Creators
+
+An **action creator** is a function that creates and returns an action object. We typically use these so we don't have to write the action object by hand every time:
+
+```js
+const addTodo = text => {
+  return {
+    type: 'todos/todoAdded',
+    payload: text
+  }
+}
+```
+
+#### Reducers
+
+A **reducer** is a function that receives the current `state` and an `action` object, decides how to update the state if necessary, and returns the new state: `(state, action) => newState`.
+
+:::info
+
+"Reducer" functions get their name because they're similar to the kind of callback function you pass to the [`Array.reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) method.
+
+:::
+
+Reducers must _always_ follow some specific rules:
+
+- They should only calculate the new state value based on the `state` and `action` arguments
+- They are not allowed to modify the existing `state`. Instead, they must make _immutable updates_, by copying the existing `state` and making changes to the copied values.
+- They must not do any asynchronous logic, calculate random values, or cause other "side effects"
+
+We'll talk more about the rules of reducers later, including why they're important and how to follow them correctly.
+
+The logic inside reducer functions typically follows the same series of steps:
+
+- Check to see if the reducer cares about this action
+  - If so, make a copy of the state, update the copy with new values, and return it
+- Otherwise, return the existing state unchanged
+
+Here's a small example of a reducer, showing the steps that each reducer should follow:
+
+```js
+const initialState = { value: 0 }
+
+function counterReducer(state = initialState, action) {
+  // Check to see if the reducer cares about this action
+  if (action.type === 'counter/increment') {
+    // If so, make a copy of `state`
+    return {
+      ...state,
+      // and update the copy with the new value
+      value: state.value + 1
+    }
+  }
+  // otherwise return the existing state unchanged
+  return state
+}
+```
+
+Reducers can use any kind of logic inside to decide what the new state should be: `if/else`, `switch`, loops, and so on.
+
+<DetailedExplanation title="Detailed Explanation: Why Are They Called 'Reducers?'" >
+
+The [`Array.reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) method lets you take an array of values, process each item in the array one at a time, and return a single final result. You can think of it as "reducing the array down to one value".
+
+`Array.reduce()` takes a callback function as an argument, which will be called one time for each item in the array. It takes two arguments:
+
+- `previousResult`, the value that your callback returned last time
+- `currentItem`, the current item in the array
+
+The first time that the callback runs, there isn't a `previousResult` available, so we need to also pass in an initial value that will be used as the first `previousResult`.
+
+If we wanted to add together an array of numbers to find out what the total is, we could write a reduce callback that looks like this:
+
+```js
+const numbers = [2, 5, 8]
+
+const addNumbers = (previousResult, currentItem) => {
+  console.log({ previousResult, currentItem })
+  return previousResult + currentItem
+}
+
+const initialValue = 0
+
+const total = numbers.reduce(addNumbers, initialValue)
+// {previousResult: 0, currentItem: 2}
+// {previousResult: 2, currentItem: 5}
+// {previousResult: 7, currentItem: 8}
+
+console.log(total)
+// 15
+```
+
+Notice that this `addNumber` "reduce callback" function doesn't need to keep track of anything itself. It takes the `previousResult` and `currentItem` arguments, does something with them, and returns a new result value.
+
+**A Redux reducer function is exactly the same idea as this "reduce callback" function!** It takes a "previous result" (the `state`), and the "current item" (the `action` object), decides a new state value based on those arguments, and returns that new state.
+
+If we were to create an array of Redux actions, call `reduce()`, and pass in a reducer function, we'd get a final result the same way:
+
+```js
+const actions = [
+  { type: 'counter/increment' },
+  { type: 'counter/increment' },
+  { type: 'counter/increment' }
+]
+
+const initialState = { value: 0 }
+
+const finalResult = actions.reduce(counterReducer, initialState)
+console.log(finalResult)
+// {value: 3}
+```
+
+We can say that **Redux reducers reduce a set of actions (over time) into a single state**. The difference is that with `Array.reduce()` it happens all at once, and with Redux, it happens over the lifetime of your running app.
+
+</DetailedExplanation>
+
+#### Store
+
+The current Redux application state lives in an object called the **store** .
+
+The store is created by passing in a reducer, and has a method called `getState` that returns the current state value:
+
+```js
+import { configureStore } from '@reduxjs/toolkit'
+
+const store = configureStore({ reducer: counterReducer })
+
+console.log(store.getState())
+// {value: 0}
+```
+
+#### Dispatch
+
+The Redux store has a method called `dispatch`. **The only way to update the state is to call `store.dispatch()` and pass in an action object**. The store will run its reducer function and save the new state value inside, and we can call `getState()` to retrieve the updated value:
+
+```js
+store.dispatch({ type: 'counter/increment' })
+
+console.log(store.getState())
+// {value: 1}
+```
+
+**You can think of dispatching actions as "triggering an event"** in the application. Something happened, and we want the store to know about it. Reducers act like event listeners, and when they hear an action they are interested in, they update the state in response.
+
+We typically call action creators to dispatch the right action:
+
+```js
+const increment = () => {
+  return {
+    type: 'counter/increment'
+  }
+}
+
+store.dispatch(increment())
+
+console.log(store.getState())
+// {value: 2}
+```
+
+#### Selectors
+
+**Selectors** are functions that know how to extract specific pieces of information from a store state value. As an application grows bigger, this can help avoid repeating logic as different parts of the app need to read the same data:
+
+```js
+const selectCounterValue = state => state.value
+
+const currentValue = selectCounterValue(store.getState())
+console.log(currentValue)
+// 2
+```
+
+### Redux Application Data Flow
+
+Earlier, we talked about "one-way data flow", which describes this sequence of steps to update the app:
+
+- State describes the condition of the app at a specific point in time
+- The UI is rendered based on that state
+- When something happens (such as a user clicking a button), the state is updated based on what occurred
+- The UI re-renders based on the new state
+
+For Redux specifically, we can break these steps into more detail:
+
+- Initial setup:
+  - A Redux store is created using a root reducer function
+  - The store calls the root reducer once, and saves the return value as its initial `state`
+  - When the UI is first rendered, UI components access the current state of the Redux store, and use that data to decide what to render. They also subscribe to any future store updates so they can know if the state has changed.
+- Updates:
+  - Something happens in the app, such as a user clicking a button
+  - The app code dispatches an action to the Redux store, like `dispatch({type: 'counter/increment'})`
+  - The store runs the reducer function again with the previous `state` and the current `action`, and saves the return value as the new `state`
+  - The store notifies all parts of the UI that are subscribed that the store has been updated
+  - Each UI component that needs data from the store checks to see if the parts of the state they need have changed.
+  - Each component that sees its data has changed forces a re-render with the new data, so it can update what's shown on the screen
+
+Here's what that data flow looks like visually:
+
+![Redux data flow diagram](/img/tutorials/ReduxDataFlowDiagram.gif)
+
+## What You've Learned
+
+Redux does have a number of new terms and concepts to remember. As a reminder, here's what we just covered:
+
+:::tip
+
+- **Redux is a library for managing global application state**
+  - Redux is typically used with the React-Redux library for integrating Redux and React together
+  - Redux Toolkit is the recommended way to write Redux logic
+- **Redux uses a "one-way data flow" app structure**
+  - State describes the condition of the app at a point in time, and UI renders based on that state
+  - When something happens in the app:
+    - The UI dispatches an action
+    - The store runs the reducers, and the state is updated based on what occurred
+    - The store notifies the UI that the state has changed
+  - The UI re-renders based on the new state
+- **Redux uses several types of code**
+  - _Actions_ are plain objects with a `type` field, and describe "what happened" in the app
+  - _Reducers_ are functions that calculate a new state value based on previous state + an action
+  - A Redux _store_ runs the root reducer whenever an action is _dispatched_
+
+:::
+
+## What's Next?
+
+We've seen each of the individual pieces of a Redux app. Next, continue on to [Part 2: Redux App Structure](./part-2-app-structure.md), where we'll look at a full working example to see how the pieces fit together.
diff --git a/docs/tutorials/essentials/part-2-app-structure.md b/docs/tutorials/essentials/part-2-app-structure.md
new file mode 100644
index 0000000000..4ad20f607a
--- /dev/null
+++ b/docs/tutorials/essentials/part-2-app-structure.md
@@ -0,0 +1,734 @@
+---
+id: part-2-app-structure
+title: 'Redux Essentials, Part 2: Redux App Structure'
+sidebar_label: 'Redux App Structure'
+hide_title: true
+description: 'The official Essentials tutorial for Redux: how to use Redux the right way'
+---
+
+import { DetailedExplanation } from '../../components/DetailedExplanation'
+
+# Redux Essentials, Part 2: Redux App Structure
+
+:::tip What You'll Learn
+
+- The structure of a typical React + Redux app
+- How to view state changes in the Redux DevTools Extension
+
+:::
+
+## Introduction
+
+In [Part 1: Redux Overview and Concepts](./part-1-overview-concepts.md), we looked at why Redux is useful, the terms and concepts used to describe different parts of Redux code, and how data flows through a Redux app.
+
+Now, let's look at a real working example to see how these pieces fit together.
+
+## The Counter Example App
+
+The sample project we'll look at is a small counter application that lets us add or subtract from a number as we click buttons. It may not be very exciting, but it shows all the important pieces of a React+Redux application in action.
+
+The project has been created using [the official Redux template for Create-React-App](https://github.com/reduxjs/cra-template-redux). Out of the box, it has already been configured with a standard Redux application structure, using [Redux Toolkit](https://redux-toolkit.js.org) to create the Redux store and logic, and [React-Redux](https://react-redux.js.org) to connect together the Redux store and the React components.
+
+Here's the live version of the project. You can play around with it by clicking the buttons in the app preview on the right, and browse through the source files on the left.
+
+<iframe
+  class="codesandbox"
+  src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-counter-example/tree/master/?fontsize=14&hidenavigation=1&module=%2Fsrc%2Ffeatures%2Fcounter%2FcounterSlice.js&theme=dark"
+  title="redux-essentials-example"
+  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+></iframe>
+
+If you'd like to try create this project on your own computer, you can [start a new Create-React-App project](https://create-react-app.dev/docs/getting-started#selecting-a-template) using our Redux template:
+
+```
+npx create-react-app redux-essentials-example --template redux
+```
+
+### Using the Counter App
+
+The counter app has already been set up to let us watch what happens inside as we use it.
+
+Open up your browser's DevTools. Then, choose the "Redux" tab in the DevTools, and click the "State" button in the upper-right toolbar. You should see something that looks like this:
+
+![Redux DevTools: initial app state](/img/tutorials/essentials/devtools-initial.png)
+
+On the right, we can see that our Redux store is starting off with an app state value that looks like this:
+
+```js
+{
+  counter: {
+    value: 0
+  }
+}
+```
+
+The DevTools will show us how the store state changes as we use the app.
+
+Let's play with the app first to see what it does. Click the "+" button in the app, then look at the "Diff" tab in the Redux DevTools:
+
+![Redux DevTools: first dispatched action](/img/tutorials/essentials/devtools-first-action.png)
+
+We can see two important things here:
+
+- When we clicked the "+" button, an action with a type of `"counter/increment"` was dispatched to the store
+- When that action was dispatched, the `state.counter.value` field changed from `0` to `1`
+
+Now try these steps:
+
+- Click the "+" button again. The displayed value should now be 2.
+- Click the "-" button once. The displayed value should now be 1.
+- Click the "Add Amount" button. The displayed value should now be 3.
+- Change the number "2" in the textbox to a "3"
+- Click the "Add Async" button. You should see a progress bar fill the button, and after a couple seconds, the displayed value should change to 6.
+
+Go back to the Redux DevTools. You should see a total of five actions dispatched, one for each time we clicked a button . Now select the last `"counter/increment"` entry from the list on the left, and click the "Action" tab on the right side:
+
+![Redux DevTools: done clicking buttons](/img/tutorials/essentials/devtools-done-clicking.png)
+
+We can see that this action object looked like this:
+
+```js
+{
+  type: 'counter/incrementByAmount',
+  payload: 3
+}
+```
+
+And if you click the "Diff" tab, you can see that the `state.counter.value` field changed from a `3` to a `6` in response to that action.
+
+The ability to see what is happening inside of our app and how our state is changing over time is very powerful!
+
+The DevTools have several more commands and options to help you debug your app, and we'll look at a couple of those later.
+
+## Application Contents
+
+Now that you know what the app does, let's look at how it works.
+
+Here are the key files that make up this application:
+
+- `/src`
+  - `index.js`: the starting point for the app
+  - `App.js`: the top-level React component
+  - `/app`
+    - `store.js`: creates the Redux store instance
+  - `/features`
+    - `/counter`
+      - `Counter.js`: a React component that shows the UI for the counter feature
+      - `counterSlice.js`: the Redux logic for the counter feature
+
+Let's start by looking at how the Redux store is created.
+
+### Creating the Redux Store
+
+Open up `app/store.js`, which should look like this:
+
+```js title="app/store.js"
+import { configureStore } from '@reduxjs/toolkit'
+import counterReducer from '../features/counter/counterSlice'
+
+export default configureStore({
+  reducer: {
+    counter: counterReducer
+  }
+})
+```
+
+The Redux store is created using the `configureStore` function from Redux Toolkit. `configureStore` requires that we pass in a `reducer` argument.
+
+Our application might be made up of many different features, and each of those features might have its own reducer function. When we call `configureStore`, we can pass in all of the different reducers in an object. The key names in the object will define the keys in our final state value.
+
+We have a file named `features/counter/counterSlice.js` that exports a reducer function for the counter logic. We can import that `counterReducer` function here, and include it when we create the store.
+
+When we pass in an object like `{counter: counterReducer}`, that says that we want to have a `state.counter` section of our Redux state object, and that we want the `counterReducer` function to be in charge of deciding if and how to update the `state.counter` section whenever an action is dispatched.
+
+Redux allows store setup to be customized with different kinds of plugins ("middleware" and "enhancers"). `configureStore` automatically adds several middleware to the store setup by default to provide a good developer experience, and also sets up the store so that the Redux DevTools Extension can inspect its contents.
+
+#### Redux Slices
+
+**A "slice" is a collection of Redux reducer logic and actions for a single feature in your app**, typically defined together in a single file. The name comes from splitting up the root Redux state object into multiple "slices" of state.
+
+For example, in a blogging app, our store setup might look like:
+
+```js
+import { configureStore } from '@reduxjs/toolkit'
+import usersReducer from '../features/users/usersSlice'
+import postsReducer from '../features/posts/postsSlice'
+import commentsReducer from '../features/comments/commentsSlice'
+
+export default configureStore({
+  reducer: {
+    users: usersReducer,
+    posts: postsReducer,
+    comments: commentsReducer
+  }
+})
+```
+
+In that example, `state.users`, `state.posts`, and `state.comments` are each a separate "slice" of the Redux state. Since `usersReducer` is responsible for updating the `state.users` slice, we refer to it as a "slice reducer" function.
+
+<DetailedExplanation title="Detailed Explanation: Reducers and State Structure">
+
+A Redux store needs to have a single "root reducer" function passed in when it's created. So if we have many different slice reducer functions, how do we get a single root reducer instead, and how does this define the contents of the Redux store state?
+
+If we tried calling all of the slice reducers by hand, it might look like this:
+
+```js
+function rootReducer(state = {}, action) {
+  return {
+    users: usersReducer(state.users, action),
+    posts: postsReducer(state.posts, action),
+    comments: commentsReducer(state.comments, action)
+  }
+}
+```
+
+That calls each slice reducer individually, passes in the specific slice of the Redux state, and includes each return value in the final new Redux state object.
+
+Redux has a function called [`combineReducers`](../../api/combineReducers.md) that does this for us automatically. It accepts an object full of slice reducers as its argument, and returns a function that calls each slice reducer whenever an action is dispatched. The result from each slice reducer are all combined together into a single object as the final result. We can do the same thing as the previous example using `combineReducers`:
+
+```js
+const rootReducer = combineReducers({
+  users: usersReducer,
+  posts: postsReducer,
+  comments: commentsReducer
+})
+```
+
+When we pass an object of slice reducers to `configureStore`, it passes those to `combineReducers` for us to generate the root reducer.
+
+As we saw earlier, you can also pass a reducer function directly as the `reducer` argument:
+
+```js
+const store = configureStore({
+  reducer: rootReducer
+})
+```
+
+</DetailedExplanation>
+
+### Creating Slice Reducers and Actions
+
+Since we know that the `counterReducer` function is coming from `features/counter/counterSlice.js`, let's see what's in that file, piece by piece.
+
+```js title="features/counter/counterSlice.js"
+import { createSlice } from '@reduxjs/toolkit'
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState: {
+    value: 0
+  },
+  reducers: {
+    increment: state => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      state.value += 1
+    },
+    decrement: state => {
+      state.value -= 1
+    },
+    incrementByAmount: (state, action) => {
+      state.value += action.payload
+    }
+  }
+})
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+export default counterSlice.reducer
+```
+
+Earlier, we saw that clicking the different buttons in the UI dispatched three different Redux action types:
+
+- `{type: "counter/increment"}`
+- `{type: "counter/decrement"}`
+- `{type: "counter/incrementByAmount"}`
+
+We know that actions are plain objects with a `type` field, that the `type` field is always a string, and that we typically have "action creator" functions that create and return the action objects. So where are those action objects, type strings, and action creators defined?
+
+We _could_ write those all by hand, every time. But, that would be tedious. Besides, what's _really_ important in Redux is the reducer functions, and the logic they have for calculating new state.
+
+Redux Toolkit has a function called `createSlice`, which takes care of the work of generating action type strings, action creator functions, and action objects. All you have to do is define a name for this slice, write an object that has some reducer functions in it, and it generates the corresponding action code automatically. The string from the `name` option is used as the first part of each action type, and the key name of each reducer function is used as the second part. So, the `"counter"` name + the `"increment"` reducer function generated an action type of `{type: "counter/increment"}`. (After all, why write this by hand if the computer can do it for us!)
+
+In addition to the `name` field, `createSlice` needs us to pass in the initial state value for the reducers, so that there is a `state` the first time it gets called. In this case, we're providing an object with a `value` field that starts off at 0.
+
+We can see here that there are three reducer functions, and that corresponds to the three different action types that were dispatched by clicking the different buttons.
+
+`createSlice` automatically generates action creators with the same names as the reducer functions we wrote. We can check that by calling one of them and seeing what it returns:
+
+```js
+console.log(counterSlice.actions.increment())
+// {type: "counter/increment"}
+```
+
+It also generates the slice reducer function that knows how to respond to all these action types:
+
+```js
+const newState = counterSlice.reducer(
+  { value: 10 },
+  counterSlice.actions.increment()
+)
+console.log(newState)
+// {value: 11}
+```
+
+### Rules of Reducers
+
+We said earlier that reducers must **always** follow some special rules:
+
+- They should only calculate the new state value based on the `state` and `action` arguments
+- They are not allowed to modify the existing `state`. Instead, they must make _immutable updates_, by copying the existing `state` and making changes to the copied values.
+- They must not do any asynchronous logic or other "side effects"
+
+But why are these rules important? There's a few different reasons:
+
+- One of the goals of Redux is to make your code predictable. When a function's output is only calculated from the input arguments, it's easier to understand how that code works, and to test it.
+- On the other hand, if a function depends on variables outside itself, or behaves randomly, you never know what will happen when you run it.
+- If a function modifies other values, including its arguments, that can change the way the application works unexpectedly. This can be a common source of bugs, such as "I updated my state, but now my UI isn't updating when it should!"
+- Some of the Redux DevTools capabilities depend on having your reducers follow these rules correctly
+
+The rule about "immutable updates" is particularly important, and worth talking about further.
+
+### Reducers and Immutable Updates
+
+Earlier, we talked about "mutation" (modifying existing object/array values) and "immutability" (treating values as something that cannot be changed).
+
+:::warning
+
+In Redux, **our reducers are _never_ allowed to mutate the original / current state values!**
+
+:::
+
+So if we can't change the originals, how do we return an updated state?
+
+:::tip
+
+**Reducers can only make _copies_ of the original values, and then they can mutate the copies.**
+
+:::
+
+We already saw that we can [write immutable updates by hand](./part-1-overview-concepts.md#immutability), by using JavaScript's array / object spread operators and other functions that return copies of the original values. However, if you're thinking that "writing immutable updates by hand this way looks hard to remember and do correctly"... yeah, you're right! :)
+
+Writing immutable update logic by hand _is_ hard, and accidentally mutating state in reducers is the single most common mistake Redux users make.
+
+**That's why Redux Toolkit's `createSlice` function lets you write immutable updates an easier way!**
+
+`createSlice` uses a library called [Immer](https://immerjs.github.io/immer/docs/introduction) inside. Immer uses a special JS tool called a `Proxy` to wrap the data you provide, and lets you write code that "mutates" that wrapped data. But, Immer tracks all the changes you've tried to make, and then uses that list of changes to return a safely immutably updated value, as if you'd written all the immutable update logic by hand.
+
+So, instead of this:
+
+```js
+function handwrittenReducer(state, action) {
+  return {
+    ...state,
+    first: {
+      ...state.first,
+      second: {
+        ...state.first.second,
+        [action.someId]: {
+          ...state.first.second[action.someId],
+          fourth: action.someValue
+        }
+      }
+    }
+  }
+}
+```
+
+You can write code that looks like this:
+
+```js
+function reducerWithImmer(state, action) {
+  state.first.second[action.someId].fourth = action.someValue
+}
+```
+
+That's a lot easier to read!
+
+But, here's something _very_ important to remember:
+
+:::warning
+
+**You can _only_ write "mutating" logic in Redux Toolkit's `createSlice` and `createReducer` because they use Immer inside! If you write mutating logic in reducers without Immer, it _will_ mutate the state and cause bugs!**
+
+:::
+
+With that in mind, let's go back and look at the actual reducers from the counter slice.
+
+```js title="features/counter/counterSlice.js"
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState: {
+    value: 0
+  },
+  reducers: {
+    increment: state => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      state.value += 1
+    },
+    decrement: state => {
+      state.value -= 1
+    },
+    incrementByAmount: (state, action) => {
+      // highlight-next-line
+      state.value += action.payload
+    }
+  }
+})
+```
+
+We can see that the `increment` reducer will always add 1 to `state.value`. Because Immer knows we've made changes to the draft `state` object, we don't have to actually return anything here. In the same way, the `decrement` reducer subtracts 1.
+
+In both of those reducers, we don't actually need to have our code look at the `action` object. It will be passed in anyway, but since we don't need it, we can skip declaring `action` as a parameter for the reducers.
+
+On the other hand, the `incrementByAmount` reducer _does_ need to know something: how much it should be adding to the counter value. So, we declare the reducer as having both `state` and `action` arguments. In this case, we know that the amount we typed into the textbox is being put into the `action.payload` field, so we can add that to `state.value`.
+
+:::info Want to Know More?
+
+For more information on immutability and writing immutable updates, see [the "Immutable Update Patterns" docs page](../../recipes/structuring-reducers/ImmutableUpdatePatterns.md) and [The Complete Guide to Immutability in React and Redux](https://daveceddia.com/react-redux-immutability-guide/).
+
+:::
+
+### Writing Async Logic with Thunks
+
+So far, all the logic in our application has been synchronous. Actions are dispatched, the store runs the reducers and calculates the new state, and the dispatch function finishes. But, the JavaScript language has many ways to write code that is asynchronous, and our apps normally have async logic for things like fetching data from an API. We need a place to put that async logic in our Redux apps.
+
+A **thunk** is a specific kind of Redux function that can contain asynchronous logic. Thunks are written using two functions:
+
+- An inside thunk function, which gets `dispatch` and `getState` as arguments
+- The outside creator function, which creates and returns the thunk function
+
+The next function that's exported from `counterSlice` is an example of a thunk action creator:
+
+```js title="features/counter/counterSlice.js"
+// The function below is called a thunk and allows us to perform async logic.
+// It can be dispatched like a regular action: `dispatch(incrementAsync(10))`.
+// This will call the thunk with the `dispatch` function as the first argument.
+// Async code can then be executed and other actions can be dispatched
+export const incrementAsync = amount => dispatch => {
+  setTimeout(() => {
+    dispatch(incrementByAmount(amount))
+  }, 1000)
+}
+```
+
+We can use them the same way we use a typical Redux action creator:
+
+```js
+store.dispatch(incrementAsync(5))
+```
+
+However, using thunks requires that the `redux-thunk` _middleware_ (a type of plugin for Redux) be added to the Redux store when it's created. Fortunately, Redux Toolkit's `configureStore` function already sets that up for us automatically, so we can go ahead and use thunks here.
+
+When you need to make AJAX calls to fetch data from the server, you can put that call in a thunk. Here's an example that's written a bit longer, so you can see how it's defined:
+
+```js title="features/counter/counterSlice.js"
+// the outside "thunk creator" function
+const fetchUserById = userId => {
+  // the inside "thunk function"
+  return async (dispatch, getState) => {
+    try {
+      // make an async call in the thunk
+      const user = await userAPI.fetchById(userId)
+      // dispatch an action when we get the response back
+      dispatch(userLoaded(user))
+    } catch (err) {
+      // If something went wrong, handle it here
+    }
+  }
+}
+```
+
+We'll see thunks being used in [Part 5: Async Logic and Data Fetching](./part-5-async-logic.md)
+
+<DetailedExplanation title="Detailed Explanation: Thunks and Async Logic">
+
+We know that we're not allowed to put any kind of async logic in reducers. But, that logic has to live somewhere.
+
+If we have access to the Redux store, we could write some async code and call `store.dispatch()` when we're done:
+
+```js
+const store = configureStore({ reducer: counterReducer })
+
+setTimeout(() => {
+  store.dispatch(increment())
+}, 250)
+```
+
+But, in a real Redux app, we're not allowed to import the store into other files, especially in our React components, because it makes that code harder to test and reuse.
+
+In addition, we often need to write some async logic that we know will be used with _some_ store, eventually, but we don't know _which_ store.
+
+The Redux store can be extended with "middleware", which are a kind of add-on or plugin that can add extra abilities. The most common reason to use middleware is to let you write code that can have async logic, but still talk to the store at the same time. They can also modify the store so that we can call `dispatch()` and pass in values that are _not_ plain action objects, like functions or Promises.
+
+The Redux Thunk middleware modifies the store to let you pass functions into `dispatch`. In fact, it's short enough we can paste it here:
+
+```js
+const thunkMiddleware = ({ dispatch, getState }) => next => action => {
+  if (typeof action === 'function') {
+    return action(dispatch, getState, extraArgument)
+  }
+
+  return next(action)
+}
+```
+
+It looks to see if the "action" that was passed into `dispatch` is actually a function instead of a plain action object. If it's actually a function, it calls the function, and returns the result. Otherwise, since this must be an action object, it passes the action forward to the store.
+
+This gives us a way to write whatever sync or async code we want, while still having access to `dispatch` and `getState`.
+
+</DetailedExplanation>
+
+There's one more function in this file, but we'll talk about that in a minute when we look at the `<Counter>` UI component.
+
+:::info Want to Know More?
+
+See [the Redux Thunk docs](https://github.com/reduxjs/redux-thunk), the post [What the heck is a thunk?](https://daveceddia.com/what-is-a-thunk/) and the [Redux FAQ entry on "why do we use middleware for async?"](../../faq/Actions.md#how-can-i-represent-side-effects-such-as-ajax-calls-why-do-we-need-things-like-action-creators-thunks-and-middleware-to-do-async-behavior) for more information.
+
+:::
+
+### The React Counter Component
+
+Earlier, we saw what a standalone React `<Counter>` component looks like. Our React+Redux app has a similar `<Counter>` component, but it does a few things differently.
+
+We'll start by looking at the `Counter.js` component file:
+
+```jsx title="features/counter/Counter.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}>
+        // highlight-start
+        <button
+          className={styles.button}
+          aria-label="Increment value"
+          onClick={() => dispatch(increment())}
+        >
+          +
+        </button>
+        // highlight-end
+        <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>
+  )
+}
+```
+
+Like with the earlier plain React example, we have a function component called `Counter`, that stores some data in a `useState` hook.
+
+However, in our component, it doesn't look like we're storing the actual current counter value as state. There _is_ a variable called `count`, but it's not coming from a `useState` hook.
+
+While React includes several built-in hooks like `useState` and `useEffect`, other libraries can create their own [custom hooks](https://reactjs.org/docs/hooks-custom.html) that use React's hooks to build custom logic.
+
+The [React-Redux library](https://react-redux.js.org/) has [a set of custom hooks that allow your React component to interact with a Redux store](https://react-redux.js.org/api/hooks).
+
+#### Reading Data with `useSelector`
+
+First, the `useSelector` hook lets our component extract whatever pieces of data it needs from the Redux store state.
+
+Earlier, we saw that we can write "selector" functions, which take `state` as an argument and return some part of the state value.
+
+Our `counterSlice.js` has this selector function at the bottom:
+
+```js  title="features/counter/counterSlice.js"
+// The function below is called a selector and allows us to select a value from
+// the state. Selectors can also be defined inline where they're used instead of
+// in the slice file. For example: `useSelector((state) => state.counter.value)`
+export const selectCount = state => state.counter.value
+```
+
+If we had access to a Redux store, we could retrieve the current counter value as:
+
+```js
+const count = selectCount(store.getState())
+console.log(count)
+// 0
+```
+
+Our components can't talk to the Redux store directly, because we're not allowed to import it into component files. But, `useSelector` takes care of talking to the Redux store behind the scenes for us. If we pass in a selector function, it calls `someSelector(store.getState())` for us, and returns the result.
+
+So, we can get the current store counter value by doing:
+
+```js
+const count = useSelector(selectCount)
+```
+
+We don't have to _only_ use selectors that have already been exported, either. For example, we could write a selector function as an inline argument to `useSelector`:
+
+```js
+const countPlusTwo = useSelector(state => state.counter.value + 2)
+```
+
+Any time an action has been dispatched and the Redux store has been updated, `useSelector` will re-run our selector function. If the selector returns a different value than last time, `useSelector` will make sure our component re-renders with the new value.
+
+#### Dispatching Actions with `useDispatch`
+
+Similarly, we know that if we had access to a Redux store, we could dispatch actions using action creators, like `store.dispatch(increment())`. Since we don't have access to the store itself, we need some way to have access to just the `dispatch` method.
+
+The `useDispatch` hook does that for us, and gives us the actual `dispatch` method from the Redux store:
+
+```js
+const dispatch = useDispatch()
+```
+
+From there, we can dispatch actions when the user does something like clicking on a button:
+
+```jsx  title="features/counter/Counter.js"
+<button
+  className={styles.button}
+  aria-label="Increment value"
+  onClick={() => dispatch(increment())}
+>
+  +
+</button>
+```
+
+### Component State and Forms
+
+By now you might be wondering, "Do I always have to put all my app's state into the Redux store?"
+
+The answer is **NO. Global state that is needed across the app should go in the Redux store. State that's only needed in one place should be kept in component state.**
+
+In this example, we have an input textbox where the user can type in the next number to be added to the counter:
+
+```jsx title="features/counter/Counter.js"
+const [incrementAmount, setIncrementAmount] = useState('2')
+
+// later
+return (
+  <div className={styles.row}>
+    <input
+      className={styles.textbox}
+      aria-label="Set increment amount"
+      value={incrementAmount}
+      onChange={e => setIncrementAmount(e.target.value)}
+    />
+    <button
+      className={styles.button}
+      onClick={() => dispatch(incrementByAmount(Number(incrementAmount) || 0))}
+    >
+      Add Amount
+    </button>
+    <button
+      className={styles.asyncButton}
+      onClick={() => dispatch(incrementAsync(Number(incrementAmount) || 0))}
+    >
+      Add Async
+    </button>
+  </div>
+)
+```
+
+We _could_ keep the current number string in the Redux store, by dispatching an action in the input's `onChange` handler and keeping it in our reducer. But, that doesn't give us any benefit. The only place that text string is used is here, in the `<Counter>` component. (Sure, there's only one other component in this example: `<App>`. But even if we had a larger application with many components, only `<Counter>` cares about this input value.)
+
+So, it makes sense to keep that value in a `useState` hook here in the `<Counter>` component.
+
+Similarly, if we had a boolean flag called `isDropdownOpen`, no other components in the app would care about that - it should really stay local to this component.
+
+**In a React + Redux app, your global state should go in the Redux store, and your local state should stay in React components.**
+
+If you're not sure where to put something, here are some common rules of thumb for determining what kind of data should be put into Redux:
+
+- Do other parts of the application care about this data?
+- Do you need to be able to create further derived data based on this original data?
+- Is the same data being used to drive multiple components?
+- Is there value to you in being able to restore this state to a given point in time (ie, time travel debugging)?
+- Do you want to cache the data (ie, use what's in state if it's already there instead of re-requesting it)?
+- Do you want to keep this data consistent while hot-reloading UI components (which may lose their internal state when swapped)?
+
+This is also a good example of how to think about forms in Redux in general. **Most form state probably shouldn't be kept in Redux.** Instead, keep the data in your form components as you're editing it, and then dispatch Redux actions to update the store when the user is done.
+
+One other thing to note before we move on: remember that `incrementAsync` thunk from `counterSlice.js`? We're using it here in this component. Notice that we use it the same way we dispatch the other normal action creators. This component doesn't care whether we're dispatching a normal action or starting some async logic. It only knows that when you click that button, it dispatches something.
+
+### Providing the Store
+
+We've seen that our components can use the `useSelector` and `useDispatch` hooks to talk to the Redux store. But, since we didn't import the store, how do those hooks know what Redux store to talk to?
+
+Now that we've seen all the different pieces of this application, it's time to circle back to the starting point of this application and see how the last pieces of the puzzle fit together.
+
+```jsx  title="index.js"
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import store from './app/store'
+// highlight-next-line
+import { Provider } from 'react-redux'
+import * as serviceWorker from './serviceWorker'
+
+ReactDOM.render(
+  // highlight-start
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  // highlight-end
+  document.getElementById('root')
+)
+```
+
+We always have to call `ReactDOM.render(<App />)` to tell React to start rendering our root `<App>` component. In order for our hooks like `useSelector` to work right, we need to use a component called `<Provider>` to pass down the Redux store behind the scenes so they can access it.
+
+We already created our store in `app/store.js`, so we can import it here. Then, we put our `<Provider>` component around the whole `<App>`, and pass in the store: `<Provider store={store}>`.
+
+Now, any React components that call `useSelector` or `useDispatch` will be talking to the Redux store we gave to the `<Provider>`.
+
+## What You've Learned
+
+Even though the counter example app is pretty small, it showed all the key pieces of a React + Redux app working together. Here's what we covered:
+
+:::tip
+
+- **We can create a Redux store using the Redux Toolkit `configureStore` API**
+  - `configureStore` accepts a `reducer` function as a named argument
+  - `configureStore` automatically sets up the store with good default settings
+- **Redux logic is typically organized into files called "slices"**
+  - A "slice" contains the reducer logic and actions related to a specific feature / section of the Redux state
+  - Redux Toolkit's `createSlice` API generates action creators and action types for each individual reducer function you provide
+- **Redux reducers must follow specific rules**
+  - Should only calculate a new state value based on the `state` and `action` arguments
+  - Must make _immutable updates_ by copying the existing state
+  - Cannot contain any asynchronous logic or other "side effects"
+  - Redux Toolkit's `createSlice` API uses Immer to allow "mutating" immutable updates
+- **Async logic is typically written in special functions called "thunks"**
+  - Thunks receive `dispatch` and `getState` as arguments
+  - Redux Toolkit enables the `redux-thunk` middleware by default
+- **React-Redux allows React components to interact with a Redux store**
+  - Wrapping the app with `<Provider store={store}>` enables all components to use the store
+  - Global state should go in the Redux store, local state should stay in React components
+
+:::
+
+## What's Next?
+
+Now that you've seen all the pieces of a Redux app in action, it's time to write your own! For the rest of this tutorial, you'll be building a larger example app that uses Redux. Along the way, we'll cover all the key ideas you need to know to use Redux the right way.
+
+Continue on to [Part 3: Basic Redux Data Flow](./part-3-data-flow.md) to get started building the example app.
diff --git a/docs/tutorials/essentials/part-3-data-flow.md b/docs/tutorials/essentials/part-3-data-flow.md
new file mode 100644
index 0000000000..9e5e5f3907
--- /dev/null
+++ b/docs/tutorials/essentials/part-3-data-flow.md
@@ -0,0 +1,458 @@
+---
+id: part-3-data-flow
+title: 'Redux Essentials, Part 3: Basic Redux Data Flow'
+sidebar_label: 'Basic Redux Data Flow'
+hide_title: true
+description: 'The official Essentials tutorial for Redux: how to use Redux the right way'
+---
+
+import { DetailedExplanation } from '../../components/DetailedExplanation'
+
+# Redux Essentials, Part 3: Basic Redux Data Flow
+
+:::tip What You'll Learn
+
+- How to add "slices" of reducer logic to the Redux store with `createSlice`
+- Reading Redux data in components with the `useSelector` hook
+- Dispatching actions in components with the `useDispatch` hook
+
+:::
+
+:::info Prerequisites
+
+- Familiarity with key Redux terms and concepts like "actions", "reducers", "store", and "dispatching". (See **[Part 1](./part-1-overview-concepts.md)** for explanations of these terms.)
+
+:::
+
+## Introduction
+
+In [Part 1: Redux Overview and Concepts](./part-1-overview-concepts.md), we looked at how Redux can help us build maintainable apps by giving us a single central place to put global app state. We also talked about core Redux concepts like dispatching action objects, using reducer functions that return new state values, and writing async logic using thunks. In [Part 2: Redux App Structure](./part-2-app-structure.md), we saw how APIs like `configureStore` and `createSlice` from Redux Toolkit and `Provider` and `useSelector` from React-Redux work together to let us write Redux logic and interact with that logic from our React components.
+
+Now that you have some idea of what these pieces are, it's time to put that knowledge into practice. We're going to build a small social media feed app, which will include a number of features that demonstrate some real-world use cases. This will help you understand how to use Redux in your own applications.
+
+:::caution
+
+The example app is not meant as a complete production-ready project. The goal is to help you learn the Redux APIs and typical usage patterns, and point you in the right direction using some limited examples. Also, some of the early pieces we build will be updated later on to show better ways to do things. Please read through the whole tutorial to see all the concepts in use.
+
+:::
+
+### Project Setup
+
+For this tutorial, we've created a pre-configured starter project that already has React and Redux set up, includes some default styling, and has a fake REST API that will allow us to write actual API requests in our app. You'll use this as the basis for writing the actual application code.
+
+To get started, you can open and fork this CodeSandbox:
+
+<iframe
+  class="codesandbox"
+  src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-example-app/tree/master/?fontsize=14&hidenavigation=1&theme=dark"
+  title="redux-quick-start-example-app"
+  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+></iframe>
+
+You can also [clone the same project from this Github repo](https://github.com/reduxjs/redux-essentials-example-app). After cloning the repo, you can install the tools for the project with `npm install`, and start it with `npm start`.
+
+If you'd like to see the final version of what we're going to build, you can check out [the **`tutorial-steps` branch**](https://github.com/reduxjs/redux-essentials-example-app/tree/tutorial-steps), or [look at the final version in this CodeSandbox](https://codesandbox.io/s/github/reduxjs/redux-essentials-example-app/tree/tutorial-steps).
+
+> We'd like to thank [Tania Rascia](https://www.taniarascia.com/), whose [Using Redux with React](https://www.taniarascia.com/redux-react-guide/) tutorial helped inspire the example in this page. It also uses her [Primitive UI CSS starter](https://taniarascia.github.io/primitive/) for styling.
+
+#### Creating a New Redux + React Project
+
+Once you've finished this tutorial, you'll probably want to try working on your own projects. **We recommend using the [Redux templates for Create-React-App](https://github.com/reduxjs/cra-template-redux) as the fastest way to create a new Redux + React project**. It comes with Redux Toolkit and React-Redux already configured, using [the same "counter" app example you saw in Part 1](./part-1-overview-concepts.md). This lets you jump right into writing your actual application code without having to add the Redux packages and set up the store.
+
+If you want to know specific details on how to add Redux to a project, see this explanation:
+
+<DetailedExplanation title="Detailed Explanation: Adding Redux to a React Project">
+
+The Redux template for CRA comes with Redux Toolkit and React-Redux already configured. If you're setting up a new project from scratch without that template, follow these steps:
+
+- Add the `@reduxjs/toolkit` and `react-redux` packages
+- Create a Redux store using RTK's `configureStore` API, and pass in at least one reducer function
+- Import the Redux store into your application's entry point file (such as `src/index.js`)
+- Wrap your root React component with the `<Provider>` component from React-Redux, like:
+
+```jsx
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+)
+```
+
+</DetailedExplanation>
+
+#### Exploring the Initial Project
+
+Let's take a quick look at what the initial project contains:
+
+- `/src`
+  - `index.js`: the entry point file for the application. It renders the React-Redux `<Provider>` component and the main `<App>` component.
+  - `App.js`: the main application component. Renders the top navbar and handles client-side routing for the other content.
+  - `index.css`: styles for the complete application
+  - `/api`
+    - `client.js`: a small AJAX request client that allows us to make GET and POST requests
+    - `server.js`: provides a fake REST API for our data. Our app will fetch data from these fake endpoints later.
+  - `/app`
+    - `Navbar.js`: renders the top header and nav content
+    - `store.js`: creates the Redux store instance
+
+If you load the app now, you should see the header and a welcome message. We can also open up the Redux DevTools Extension and see that our initial Redux state is entirely empty.
+
+With that, let's get started!
+
+## Main Posts Feed
+
+The main feature for our social media feed app will be a list of posts. We'll add several more pieces to this feature as we go along, but to start off, our first goal is to only show the list of post entries on screen.
+
+### Creating the Posts Slice
+
+The first step is to create a new Redux "slice" that will contain the data for our posts. Once we have that data in the Redux store, we can create the React components to show that data on the page.
+
+Inside of `src`, create a new `features` folder, put a `posts` folder inside of `features`, and add a new file named `postsSlice.js`.
+
+We're going to use the Redux Toolkit `createSlice` function to make a reducer function that knows how to handle our posts data. Reducer functions need to have some initial data included so that the Redux store has those values loaded when the app starts up.
+
+For now, we'll create an array with some fake post objects inside so that we can begin adding the UI.
+
+We'll import `createSlice`, define our initial posts array, pass that to `createSlice`, and export the posts reducer function that `createSlice` generated for us:
+
+```js title="features/posts/postsSlice.js"
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = [
+  { id: 1, title: 'First Post!', content: 'Hello!' },
+  { id: 2, title: 'Second Post', content: 'More text' }
+]
+
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {}
+})
+
+export default postsSlice.reducer
+```
+
+Every time we create a new slice, we need to add its reducer function to our Redux store. We already have a Redux store being created, but right now it doesn't have any data inside. Open up `app/store.js`, import the `postsReducer` function, and update the call to `configureStore` so that the `postsReducer` is being passed as a reducer field named `posts`:
+
+```js title="app/store.js"
+import { configureStore } from '@reduxjs/toolkit'
+
+import postsReducer from '../features/posts/postsSlice'
+
+export default configureStore({
+  reducer: {
+    posts: postsReducer
+  }
+})
+```
+
+This tells Redux that we want our top-level state object to have a field named `posts` inside, and all the data for `state.posts` will be updated by the `postsReducer` function when actions are dispatched.
+
+We can confirm that this works by opening the Redux DevTools Extension and looking at the current state contents:
+
+![Initial posts state](/img/tutorials/essentials/example-initial-posts.png)
+
+### Showing the Posts List
+
+Now that we have some posts data in our store, we can create a React component that shows the list of posts. All of the code related to our feed posts feature should go in the `posts` folder, so go ahead and create a new file named `PostsList.js` in there.
+
+If we're going to render a list of posts, we need to get the data from somewhere. React components can read data from the Redux store using the `useSelector` hook from the React-Redux library. The "selector functions" that you write will be called with the entire Redux `state` object as a parameter, and should return the specific data that this component needs from the store.
+
+Our initial `PostsList` component will read the `state.posts` value from the Redux store, then loop over the array of posts and show each of them on screen:
+
+```jsx title="features/posts/PostsList.js"
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+export const PostsList = () => {
+  const posts = useSelector(state => state.posts)
+
+  const renderedPosts = posts.map(post => (
+    <article className="post-excerpt">
+      <h3>{post.title}</h3>
+      <p>{post.content.substring(0, 100)}</p>
+    </article>
+  ))
+
+  return (
+    <section>
+      <h2>Posts</h2>
+      {renderedPosts}
+    </section>
+  )
+}
+```
+
+We then need to update the routing in `App.js` so that we show the `PostsList` component instead of the "welcome" message. Import the `PostsList` component into `App.js`, and replace the welcome text with `<PostsList />`. We'll also wrap it in a React Fragment, because we're going to add something else to the main page soon:
+
+```jsx title="App.js"
+import React from 'react'
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Redirect
+} from 'react-router-dom'
+
+import { Navbar } from './app/Navbar'
+
+// highlight-next-line
+import { PostsList } from './features/posts/PostsList'
+
+function App() {
+  return (
+    <Router>
+      <Navbar />
+      <div className="App">
+        <Switch>
+          <Route
+            exact
+            path="/"
+            render={() => (
+              // highlight-start
+              <React.Fragment>
+                <PostsList />
+              </React.Fragment>
+              // highlight-end
+            )}
+          />
+          <Redirect to="/" />
+        </Switch>
+      </div>
+    </Router>
+  )
+}
+
+export default App
+```
+
+Once that's added, the main page of our app should now look like this:
+
+![Initial posts list](/img/tutorials/essentials/example-initial-posts-list.png)
+
+Progress! We've added some data to the Redux store, and shown it on screen in a React component.
+
+### Adding New Posts
+
+It's nice to look at posts people have written, but we'd like to be able to write our own posts. Let's create an "Add New Post" form that lets us write posts and save them.
+
+We'll create the empty form first and add it to the page. Then, we'll connect the form to our Redux store so that new posts are added when we click the "Save Post" button.
+
+#### Adding the New Post Form
+
+Create `AddPostForm.js` in our `posts` folder. We'll add a text input for the post title, and a text area for the body of the post:
+
+```jsx title="features/posts/AddPostForm.js"
+import React, { useState } from 'react'
+
+export const AddPostForm = () => {
+  const [title, setTitle] = useState('')
+  const [content, setContent] = useState('')
+
+  const onTitleChanged = e => setTitle(e.target.value)
+  const onContentChanged = e => setContent(e.target.value)
+
+  return (
+    <section>
+      <h2>Add a New Post</h2>
+      <form>
+        <label htmlFor="postTitle">Post Title:</label>
+        <input
+          type="text"
+          id="postTitle"
+          name="postTitle"
+          value={title}
+          onChange={onTitleChanged}
+        />
+        <label htmlFor="postContent">Content:</label>
+        <textarea
+          id="postContent"
+          name="postContent"
+          value={content}
+          onChange={onContentChanged}
+        />
+        <button type="button">Save Post</button>
+      </form>
+    </section>
+  )
+}
+```
+
+Import that component into `App.js`, and add it right above the `<PostsList />` component:
+
+```jsx title="App.js"
+<Route
+  exact
+  path="/"
+  render={() => (
+    <React.Fragment>
+      // highlight-next-line
+      <AddPostForm />
+      <PostsList />
+    </React.Fragment>
+  )}
+/>
+```
+
+You should see the form show up in the page right below the header.
+
+#### Saving Post Entries
+
+Now, let's update our posts slice to add new post entries to the Redux store.
+
+Our posts slice is responsible for handling all updates to the posts data. Inside of the `createSlice` call, there's an object called `reducers`. Right now, it's empty. We need to add a reducer function inside of there to handle the case of a post being added.
+
+Inside of `reducers`, add a function named `postAdded`, which will receive two arguments: the current `state` value, and the `action` object that was dispatched. Since the posts slice _only_ knows about the data it's responsible for, the `state` argument will be the array of posts by itself, and not the entire Redux state object.
+
+The `action` object will have our new post entry as the `action.payload` field, and we'll put that new post object into the `state` array.
+
+When we write the `postAdded` reducer function, `createSlice` will automatically generate an "action creator" function with the same name. We can export that action creator and use it in our UI components to dispatch the action when the user clicks "Save Post".
+
+```js title="features/posts/postsSlice.js"
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {
+    // highlight-start
+    postAdded(state, action) {
+      state.push(action.payload)
+    }
+    // highlight-end
+  }
+})
+
+// highlight-next-line
+export const { postAdded } = postsSlice.actions
+```
+
+:::warning
+
+Remember: **reducer functions must _always_ create new state values immutably, by making copies!** It's safe to call mutating functions like `Array.push()` or modify object fields like `state.someField = someValue` inside of `createSlice()`, because it converts those mutations into safe immutable updates internally using the Immer library, but **don't try to mutate any data outside of `createSlice`!**
+
+:::
+
+#### Dispatching the "Post Added" Action
+
+Our `AddPostForm` has text inputs and a "Save Post" button, but the button doesn't do anything yet. We need to add a click handler that will dispatch the `postAdded` action creator and pass in a new post object containing the title and content the user wrote.
+
+Our post objects also need to have an `id` field. Right now, our initial test posts are using some fake numbers for their IDs. We could write some code that would figure out what the next incrementing ID number should be, but it would be better if we generated a random unique ID instead. Redux Toolkit has a `nanoid` function we can use for that.
+
+:::info
+
+We'll talk more about generating IDs and dispatching actions in [Part 4: Using Redux Data](./part-4-using-data.md).
+
+:::
+
+In order to dispatch actions from a component, we need access to the store's `dispatch` function. We get this by calling the `useDispatch` hook from React-Redux. We also need to import the `postAdded` action creator into this file.
+
+Once we have the `dispatch` function available in our component, we can call `dispatch(postAdded())` in a click handler. We can take the title and content values from our React component `useState` hooks, generate a new ID, and put them together into a new post object that we pass to `postAdded()`.
+
+```jsx title="features/posts/AddPostForm"
+import React, { useState } from 'react'
+// highlight-start
+import { useDispatch } from 'react-redux'
+import { nanoid } from '@reduxjs/toolkit'
+
+import { postAdded } from './postsSlice'
+// highlight-end
+
+export const AddPostForm = () => {
+  const [title, setTitle] = useState('')
+  const [content, setContent] = useState('')
+
+  // highlight-next-line
+  const dispatch = useDispatch()
+
+  const onTitleChanged = e => setTitle(e.target.value)
+  const onContentChanged = e => setContent(e.target.value)
+
+  // highlight-start
+  const onSavePostClicked = () => {
+    if (title && content) {
+      dispatch(
+        postAdded({
+          id: nanoid(),
+          title,
+          content
+        })
+      )
+
+      setTitle('')
+      setContent('')
+    }
+  }
+  // highlight-end
+
+  return (
+    <section>
+      <h2>Add a New Post</h2>
+      <form>
+        {/* omit form inputs */}
+        // highlight-next-line
+        <button type="button" onClick={onSavePostClicked}>
+          Save Post
+        </button>
+      </form>
+    </section>
+  )
+}
+```
+
+Now, try typing in a title and some text, and click "Save Post". You should see a new item for that post show up in the posts list.
+
+**Congratulations! You've just built your first working React + Redux app!**
+
+This shows the complete Redux data flow cycle:
+
+- Our posts list read the initial set of posts from the store with `useSelector` and rendered the initial UI
+- We dispatched the `postAdded` action containing the data for the new post entry
+- The posts reducer saw the `postAdded` action, and updated the posts array with the new entry
+- The Redux store told the UI that some data had changed
+- The posts list read the updated posts array, and re-rendered itself to show the new post
+
+All the new features we'll add after this will follow the same basic patterns you've seen here: adding slices of state, writing reducer functions, dispatching actions, and rendering the UI based on data from the Redux store.
+
+We can check the Redux DevTools Extension to see the action we dispatched, and look at how the Redux state was updated in response to that action. If we click the `"posts/postAdded"` entry in the actions list, the "Action" tab should look like this:
+
+![postAdded action contents](/img/tutorials/essentials/example-postAdded-action.png)
+
+The "Diff" tab should also show us that `state.posts` had one new item added, which is at index 2.
+
+Notice that our `AddPostForm` component has some React `useState` hooks inside, to keep track of the title and content values the user is typing in. Remember, **the Redux store should only contain data that's considered "global" for the application!** In this case, only the `AddPostForm` will need to know about the latest values for the input fields, so we want to keep that data in React component state instead of trying to keep the temporary data in the Redux store. When the user is done with the form, we dispatch a Redux action to update the store with the final values based on the user input.
+
+## What You've Learned
+
+Let's recap what you've learned in this section:
+
+:::tip
+
+- **Redux state is updated by "reducer functions"**:
+  - Reducers always calculate a new state _immutably_, by copying existing state values and modifying the copies with the new data
+  - The Redux Toolkit `createSlice` function generates "slice reducer" functions for you, and lets you write "mutating" code that is turned into safe immutable updates
+  - Those slice reducer functions are added to the `reducer` field in `configureStore`, and that defines the data and state field names inside the Redux store
+- **React components read data from the store with the `useSelector` hook**
+  - Selector functions receive the whole `state` object, and should return a value
+  - Selectors will re-run whenever the Redux store is updated, and if the data they return has changed, the component will re-render
+- **React components dispatch actions to update the store using the `useDispatch` hook**
+  - `createSlice` will generate action creator functions for each reducer we add to a slice
+  - Call `dispatch(someActionCreator())` in a component to dispatch an action
+  - Reducers will run, check to see if this action is relevant, and return new state if appropriate
+  - Temporary data like form input values should be kept as React component state. Dispatch a Redux action to update the store when the user is done with the form.
+
+:::
+
+Here's what the app looks like so far:
+
+<iframe
+  class="codesandbox"
+  src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-example-app/tree/checkpoint-1-postAdded/?fontsize=14&hidenavigation=1&theme=dark"
+  title="redux-quick-start-example-app"
+  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+></iframe>
+
+## What's Next?
+
+Now that you know the basic Redux data flow, move on to [Part 4: Using Redux Data](./part-4-using-data.md), where we'll add some additional functionality to our app and see examples of how to work with the data that's already in the store.
diff --git a/docs/tutorials/essentials/part-4-using-data.md b/docs/tutorials/essentials/part-4-using-data.md
new file mode 100644
index 0000000000..f9216d2a79
--- /dev/null
+++ b/docs/tutorials/essentials/part-4-using-data.md
@@ -0,0 +1,808 @@
+---
+id: part-4-using-data
+title: 'Redux Essentials, Part 4: Using Redux Data'
+sidebar_label: 'Using Redux Data'
+hide_title: true
+description: 'The official Essentials tutorial for Redux: how to use Redux the right way'
+---
+
+import { DetailedExplanation } from '../../components/DetailedExplanation'
+
+# Redux Essentials, Part 4: Using Redux Data
+
+:::tip What You'll Learn
+
+- Using Redux data in multiple React components
+- Organizing logic that dispatches actions
+- Writing more complex update logic in reducers
+
+:::
+
+:::info Prerequisites
+
+- Understanding the [Redux data flow and React-Redux APIs from Part 3](./part-3-data-flow.md)
+- Familiarity with [the React Router `<Link>` and `<Route>` components for page routing](https://reacttraining.com/react-router/web/api)
+
+:::
+
+## Introduction
+
+In [Part 3: Basic Redux Data Flow](./part-3-data-flow.md), we saw how to start from an empty Redux+React project setup, add a new slice of state, and create React components that can read data from the Redux store and dispatch actions to update that data. We also looked at how data flows through the application, with components dispatching actions, reducers processing actions and returning new state, and components reading the new state and rerendering the UI.
+
+Now that you know the core steps to write Redux logic, we're going to use those same steps to add some new features to our social media feed that will make it more useful: viewing a single post, editing existing posts, showing post author details, post timestamps, and reaction buttons.
+
+:::info
+
+As a reminder, the code examples focus on the key concepts and changes for each section. See the CodeSandbox projects and the [`tutorial-steps` branch in the project repo](https://github.com/reduxjs/redux-essentials-example-app/tree/tutorial-steps) for the complete changes in the application.
+
+:::
+
+## Showing Single Posts
+
+Since we have the ability to add new posts to the Redux store, we can add some more features that use the post data in different ways.
+
+Currently, our post entries are being shown in the main feed page, but if the text is too long, we only show an excerpt of the content. It would be helpful to have the ability to view a single post entry on its own page.
+
+### Creating a Single Post Page
+
+First, we need to add a new `SinglePostPage` component to our `posts` feature folder. We'll use React Router to show this component when the page URL looks like `/posts/123`, where the `123` part should be the ID of the post we want to show.
+
+```jsx title="features/posts/SinglePostPage.js"
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+export const SinglePostPage = ({ match }) => {
+  const { postId } = match.params
+
+  const post = useSelector(state =>
+    state.posts.find(post => post.id === postId)
+  )
+
+  if (!post) {
+    return (
+      <section>
+        <h2>Post not found!</h2>
+      </section>
+    )
+  }
+
+  return (
+    <section>
+      <article className="post">
+        <h2>{post.title}</h2>
+        <p className="post-content">{post.content}</p>
+      </article>
+    </section>
+  )
+}
+```
+
+React Router will pass in a `match` object as a prop that contains the URL information we're looking for. When we set up the route to render this component, we're going to tell it to parse the second part of the URL as a variable named `postId`, and we can read that value from `match.params`.
+
+Once we have that `postId` value, we can use it inside a selector function to find the right post object from the Redux store. We know that `state.posts` should be an array of all post objects, so we can use the `Array.find()` function to loop through the array and return the post entry with the ID we're looking for.
+
+It's important to note that **the component will re-render any time the value returned from `useSelector` changes to a new reference**. Components should always try to select the smallest possible amount of data they need from the store, which will help ensure that it only renders when it actually needs to.
+
+It's possible that we might not have a matching post entry in the store - maybe the user tried to type in the URL directly, or we don't have the right data loaded. If that happens, the `find()` function will return `undefined` instead of an actual post object. Our component needs to check for that and handle it by showing a "Post not found!" message in the page.
+
+Assuming we do have the right post object in the store, `useSelector` will return that, and we can use it to render the title and content of the post in the page.
+
+You might notice that this looks fairly similar to the logic we have in the body of our `<PostsList>` component, where we loop over the whole `posts` array to show post excerpts the main feed. We _could_ try to extract a `Post` component that could be used in both places, but there are already some differences in how we're showing a post excerpt and the whole post. It's usually better to keep writing things separately for a while even if there's some duplication, and then we can decide later if the different sections of code are similar enough that we can really extract a reusable component.
+
+### Adding the Single Post Route
+
+Now that we have a `<SinglePostPage>` component, we can define a route to show it, and add links to each post in the front page feed.
+
+We'll import `SinglePostPage` in `App.js`, and add the route:
+
+```jsx title="App.js"
+import { PostsList } from './features/posts/PostsList'
+import { AddPostForm } from './features/posts/AddPostForm'
+// highlight-next-line
+import { SinglePostPage } from './features/posts/SinglePostPage'
+
+function App() {
+  return (
+    <Router>
+      <Navbar />
+      <div className="App">
+        <Switch>
+          <Route
+            exact
+            path="/"
+            render={() => (
+              <React.Fragment>
+                <AddPostForm />
+                <PostsList />
+              </React.Fragment>
+            )}
+          />
+          // highlight-next-line
+          <Route exact path="/posts/:postId" component={SinglePostPage} />
+          <Redirect to="/" />
+        </Switch>
+      </div>
+    </Router>
+  )
+}
+```
+
+Then, in `<PostsList>`, we'll update the list rendering logic to include a `<Link>` that routes to that specific post:
+
+```jsx title="features/posts/PostsList.js"
+import React from 'react'
+import { useSelector } from 'react-redux'
+// highlight-next-line
+import { Link } from 'react-router-dom'
+
+export const PostsList = () => {
+  const posts = useSelector(state => state.posts)
+
+  const renderedPosts = posts.map(post => (
+    <article className="post-excerpt" key={post.id}>
+      <h3>{post.title}</h3>
+      <p className="post-content">{post.content.substring(0, 100)}</p>
+      // highlight-start
+      <Link to={`/posts/${post.id}`} className="button muted-button">
+        View Post
+      </Link>
+      // highlight-end
+    </article>
+  ))
+
+  return (
+    <section className="posts-list">
+      <h2>Posts</h2>
+      {renderedPosts}
+    </section>
+  )
+}
+```
+
+And since we can now click through to a different page, it would also be helpful to have a link back to the main posts page in the `<Navbar>` component as well:
+
+```jsx title="app/Navbar.js"
+import React from 'react'
+
+// highlight-next-line
+import { Link } from 'react-router-dom'
+
+export const Navbar = () => {
+  return (
+    <nav>
+      <section>
+        <h1>Redux Essentials Example</h1>
+
+        <div className="navContent">
+          // highlight-start
+          <div className="navLinks">
+            <Link to="/">Posts</Link>
+          </div>
+          // highlight-end
+        </div>
+      </section>
+    </nav>
+  )
+}
+```
+
+## Editing Posts
+
+As a user, it's really annoying to finish writing a post, save it, and realize you made a mistake somewhere. Having the ability to edit a post after we created it would be useful.
+
+Let's add a new `<EditPostForm>` component that has the ability to take an existing post ID, read that post from the store, lets the user edit the title and post content, and then save the changes to update the post in the store.
+
+### Updating Post Entries
+
+First, we need to update our `postsSlice` to create a new reducer function and an action so that the store knows how to actually update posts.
+
+Inside of the `createSlice()` call, we should add a new function into the `reducers` object. Remember that the name of this reducer should be a good description of what's happening, because we're going to see the reducer name show up as part of the action type string in the Redux DevTools whenever this action is dispatched. Our first reducer was called `postAdded`, so let's call this one `postUpdated`.
+
+In order to update a post object, we need to know:
+
+- The ID of the post being updated, so that we can find the right post object in the state
+- The new `title` and `content` fields that the user typed in
+
+Redux action objects are required to have a `type` field, which is normally a descriptive string, and may also contain other fields with more information about what happened. By convention, we normally put the additional info in a field called `action.payload`, but it's up to us to decide what the `payload` field contains - it could be a string, a number, an object, an array, or something else. In this case, since we have three pieces of information we need, let's plan on having the `payload` field be an object with the three fields inside of it. That means the action object will look like `{type: 'posts/postUpdated', payload: {id, title, content}}`.
+
+By default, the action creators generated by `createSlice` expect you to pass in one argument, and that value will be put into the action object as `action.payload`. So, we can pass an object containing those fields as the argument to the `postAdded` action creator.
+
+We also know that the reducer is responsible for determing how the state should actually be updated when an action is dispatched. Given that, we should have the reducer find the right post object based on the ID, and specifically update the `text` and `content` fields in that post.
+
+Finally, we'll need to export the action creator function that `createSlice` generated for us, so that the UI can dispatch the new `postAdded` action when the user saves the post.
+
+Given all those requirements, here's how our `postsSlice` definition should look after we're done:
+
+```js title="features/posts/postsSlice.js"
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {
+    postAdded(state, action) {
+      state.push(action.payload)
+    },
+    // highlight-start
+    postUpdated(state, action) {
+      const { id, title, content } = action.payload
+      const existingPost = state.find(post => post.id === id)
+      if (existingPost) {
+        existingPost.title = title
+        existingPost.content = content
+      }
+    }
+    // highlight-end
+  }
+})
+
+// highlight-next-line
+export const { postAdded, postUpdated } = postsSlice.actions
+
+export default postsSlice.reducer
+```
+
+### Creating an Edit Post Form
+
+Our new `<EditPostForm>` component will look similar to the `<AddPostForm>`, but the logic needs to be a bit different. We need to retrieve the right `post` object from the store, then use that to initialize the state fields in the component so the user can make changes. We'll save the changed title and content values back to the store after the user is done. We'll also uses React Router's history API to switch over to the single post page and show that post.
+
+```jsx title="features/posts/EditPostForm.js"
+import React, { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useHistory } from 'react-router-dom'
+
+import { postUpdated } from './postsSlice'
+
+export const EditPostForm = ({ match }) => {
+  const { postId } = match.params
+
+  const post = useSelector(state =>
+    state.posts.find(post => post.id === postId)
+  )
+
+  const [title, setTitle] = useState(post.title)
+  const [content, setContent] = useState(post.content)
+
+  const dispatch = useDispatch()
+  const history = useHistory()
+
+  const onTitleChanged = e => setTitle(e.target.value)
+  const onContentChanged = e => setContent(e.target.value)
+
+  const onSavePostClicked = () => {
+    if (title && content) {
+      dispatch(postUpdated({ id: postId, title, content }))
+      history.push(`/posts/${postId}`)
+    }
+  }
+
+  return (
+    <section>
+      <h2>Edit Post</h2>
+      <form>
+        <label htmlFor="postTitle">Post Title:</label>
+        <input
+          type="text"
+          id="postTitle"
+          name="postTitle"
+          placeholder="What's on your mind?"
+          value={title}
+          onChange={onTitleChanged}
+        />
+        <label htmlFor="postContent">Content:</label>
+        <textarea
+          id="postContent"
+          name="postContent"
+          value={content}
+          onChange={onContentChanged}
+        />
+      </form>
+      <button type="button" onClick={onSavePostClicked}>
+        Save Post
+      </button>
+    </section>
+  )
+}
+```
+
+Like with `SinglePostPage`, we'll need to import it into `App.js` and add a route that will render this component. We should also add a new link to our `SinglePostPage` that will route to `EditPostPage`, like:
+
+```jsx title="features/post/SinglePostPage.js"
+        <p  className="post-content">{post.content}</p>
+        // highlight-start
+        <Link to={`/editPost/${post.id}`} className="button">
+          Edit Post
+        </Link>
+        // highlight-end
+```
+
+### Preparing Action Payloads
+
+We just saw that the action creators from `createSlice` normally expect one argument, which becomes `action.payload.` This simplifies the most common usage pattern, but sometimes we need to do more work to prepare the contents of an action object. In the case of our `postAdded` action, we need to generate a unique ID for the new post, and we also need to make sure that the payload is an object that looks like `{id, title, content}`.
+
+Right now, we're generating the ID and creating the payload object in our React component, and passing the payload object into `postAdded`. But, what if we needed to dispatch the same action from different components, or the logic for preparing the payload is complicated? We'd have to duplicate that logic every time we wanted to dispatch the action, and we're forcing the component to know exactly what the payload for this action should look like.
+
+:::caution
+
+If an action needs to contain a unique ID or some other random value, always generate that first and put it in the action object. **Reducers should never calculate random values**, because that makes the results unpredictable.
+
+:::
+
+If we were writing the `postAdded` action creator by hand, we could have put the setup logic inside of it ourselves:
+
+```js
+// hand-written action creator
+function postAdded(title, content) {
+  const id = nanoid()
+  return {
+    type: 'posts/postAdded',
+    payload: { id, title, content }
+  }
+}
+```
+
+But, Redux Toolkit's `createSlice` is generating these action creators for us. That makes the code shorter because we don't have to write them ourselves, but we still need a way to customize the contents of `action.payload`.
+
+Fortunately, `createSlice` lets us define a "prepare callback" function when we write a reducer. The "prepare callback" function can take multiple arguments, generate random values like unique IDs, and run whatever other synchronous logic is needed to decide what values go into the action object. It should then return an object with the `payload` field inside. (The return object may also contain a `meta` field, which can be used to add extra descriptive values to the action, and an `error` field, which should be a boolean indicating whether this action represents some kind of an error.)
+
+Inside of the `reducers` field in `createSlice`, we can define one of the fields as an object that looks like `{reducer, prepare}`:
+
+```js title="features/posts/postsSlice.js"
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {
+    // highlight-start
+    postAdded: {
+      reducer(state, action) {
+        state.push(action.payload)
+      },
+      prepare(title, content) {
+        return {
+          payload: {
+            id: nanoid(),
+            title,
+            content
+          }
+        }
+      }
+    }
+    // highlight-end
+    // other reducers here
+  }
+})
+```
+
+Now our component doesn't have to worry about what the payload object looks like - the action creator will take care of putting it together the right way. So, we can update the component so that it passes in `title` and `content` as arguments when it dispatches `postAdded`:
+
+```jsx title="features/posts/AddPostForm.js"
+const onSavePostClicked = () => {
+  if (title && content) {
+    // highlight-next-line
+    dispatch(postAdded(title, content))
+    setTitle('')
+    setContent('')
+  }
+}
+```
+
+## Users and Posts
+
+So far, we only have one slice of state. The logic is defined in `postsSlice.js`, the data is stored in `state.posts`, and all of our components have been related to the posts feature. Real applications will probably have many different slices of state, and several different "feature folders" for the Redux logic and React components.
+
+You can't have a "social media" app if there aren't any other people involved. Let's add the ability to keep track of a list of users in our app, and update the post-related functionality to make use of that data.
+
+### Adding a Users Slice
+
+Since the concept of "users" is different than the concept of "posts", we want to keep the code and data for the users separated from the code and data for posts. We'll add a new `features/users` folder, and put a `usersSlice` file in there. Like with the posts slice, for now we'll add some initial entries so that we have data to work with.
+
+```js title="features/users/usersSlice.js"
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = [
+  { id: '0', name: 'Tianna Jenkins' },
+  { id: '1', name: 'Kevin Grant' },
+  { id: '2', name: 'Madison Price' }
+]
+
+const usersSlice = createSlice({
+  name: 'users',
+  initialState,
+  reducers: {}
+})
+
+export default usersSlice.reducer
+```
+
+For now, we don't need to actually update the data, so we'll leave the `reducers` field as an empty object. (We'll come back to this in a later section.)
+
+As before, we'll import the `usersReducer` into our store file and add it to the store setup:
+
+```js title="app/store.js"
+import { configureStore } from '@reduxjs/toolkit'
+
+import postsReducer from '../features/posts/postsSlice'
+// highlight-next-line
+import usersReducer from '../features/users/usersSlice'
+
+export default configureStore({
+  reducer: {
+    posts: postsReducer,
+    // highlight-next-line
+    users: usersReducer
+  }
+})
+```
+
+### Adding Authors for Posts
+
+Every post in our app was written by one of our users, and every time we add a new post, we should keep track of which user wrote that post. In a real app, we'd have some sort of a `state.currentUser` field that keeps track of the current logged-in user, and use that information whenever they add a post.
+
+To keep things simpler for this example, we'll update our `<AddPostForm>` component so that we can select a user from a dropdown list, and we'll include that user's ID as part of the post. Once our post objects have a user ID in them, we can use that to look up the user's name and show it in each individual post in the UI.
+
+First, we need to update our `postAdded` action creator to accept a user ID as an argument, and include that in the action. (We'll also update the existing post entries in `initialState` to have a `post.user` field with one of the example user IDs.)
+
+```js title="features/posts/postsSlice.js"
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {
+    postAdded: {
+      reducer(state, action) {
+        state.push(action.payload)
+      },
+      // highlight-next-line
+      prepare(title, content, userId) {
+        return {
+          payload: {
+            id: nanoid(),
+            title,
+            content,
+            // highlight-next-line
+            user: userId
+          }
+        }
+      }
+    }
+    // other reducers
+  }
+})
+```
+
+Now, in our `<AddPostForm>`, we can read the list of users from the store with `useSelector` and show them as a dropdown. We'll then take the ID of the selected user and pass that to the `postAdded` action creator. While we're at it, we can add a bit of validation logic to our form so that the user can only click the "Save Post" button if the title and content inputs have some actual text in them:
+
+```jsx title="features/posts/AddPostForm.js"
+import React, { useState } from 'react'
+// highlight-next-line
+import { useDispatch, useSelector } from 'react-redux'
+
+import { postAdded } from './postsSlice'
+
+export const AddPostForm = () => {
+  const [title, setTitle] = useState('')
+  const [content, setContent] = useState('')
+  const [userId, setUserId] = useState('')
+
+  const dispatch = useDispatch()
+
+  // highlight-next-line
+  const users = useSelector(state => state.users)
+
+  const onTitleChanged = e => setTitle(e.target.value)
+  const onContentChanged = e => setContent(e.target.value)
+  const onAuthorChanged = e => setUserId(e.target.value)
+
+  const onSavePostClicked = () => {
+    if (title && content) {
+      // highlight-next-line
+      dispatch(postAdded(title, content, userId))
+      setTitle('')
+      setContent('')
+    }
+  }
+
+  // highlight-start
+  const canSave = Boolean(title) && Boolean(content) && Boolean(userId)
+
+  const usersOptions = users.map(user => (
+    <option key={user.id} value={user.id}>
+      {user.name}
+    </option>
+  ))
+  // highlight-end
+
+  return (
+    <section>
+      <h2>Add a New Post</h2>
+      <form>
+        <label htmlFor="postTitle">Post Title:</label>
+        <input
+          type="text"
+          id="postTitle"
+          name="postTitle"
+          placeholder="What's on your mind?"
+          value={title}
+          onChange={onTitleChanged}
+        />
+        // highlight-start
+        <label htmlFor="postAuthor">Author:</label>
+        <select id="postAuthor" value={userId} onChange={onAuthorChanged}>
+          <option value=""></option>
+          {usersOptions}
+        </select>
+        // highlight-end
+        <label htmlFor="postContent">Content:</label>
+        <textarea
+          id="postContent"
+          name="postContent"
+          value={content}
+          onChange={onContentChanged}
+        />
+        <button type="button" onClick={onSavePostClicked} disabled={!canSave}>
+          Save Post
+        </button>
+      </form>
+    </section>
+  )
+}
+```
+
+Now, we need a way to show the name of the post's author inside of our post list items and `<SinglePostPage>`. Since we want to show this same kind of info in more than one place, we can make a `PostAuthor` component that takes a user ID as a prop, looks up the right user object, and formats the user's name:
+
+```jsx title="features/posts/PostAuthor.js"
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+export const PostAuthor = ({ userId }) => {
+  const author = useSelector(state =>
+    state.users.find(user => user.id === userId)
+  )
+
+  return <span>by {author ? author.name : 'Unknown author'}</span>
+}
+```
+
+Notice that we're following the same pattern in each of our components as we go. Any component that needs to read data from the Redux store can use the `useSelector` hook, and extract the specific pieces of data that it needs. Also, many components can access the same data in the Redux store at the same time.
+
+We can now import the `PostAuthor` component into both `PostsList.js` and `SinglePostPage.js`, and render it as `<PostAuthor userId={post.user} />`, and every time we add a post entry, the selected user's name should show up inside of the rendered post.
+
+## More Post Features
+
+At this point, we can create and edit posts. Let's add some additional logic to make our posts feed more useful.
+
+### Storing Dates for Posts
+
+Social media feeds are typically sorted by when the post was created, and show us the post creation time as a relative description like "5 hours ago". In order to do that, we need to start tracking a `date` field for our post entries.
+
+Like with the `post.user` field, we'll update our `postAdded` prepare callback to make sure that `post.date` is always included when the action is dispatched. However, it's not another parameter that will be passed in. We want to always use the exact timestamp from when the action is dispatched, so we'll let the prepare callback handle that itself.
+
+:::caution
+
+**Redux actions and state should only contain plain JS values like objects, arrays, and primitives. Don't put class instances, functions, or other non-serializable values into Redux!**.
+
+:::
+
+Since we can't just put a `Date` class instance into the Redux store, we'll track the `post.date` value as a timestamp string:
+
+```js title="features/posts/postsSlice.js"
+    postAdded: {
+      reducer(state, action) {
+        state.push(action.payload)
+      },
+      prepare(title, content, userId) {
+        return {
+          payload: {
+            id: nanoid(),
+            // highlight-next-line
+            date: new Date().toISOString(),
+            title,
+            content,
+            user: userId,
+          },
+        }
+      },
+    },
+```
+
+Like with post authors, we need to show the relative timestamp description in both our `<PostsList>` and `<SinglePostPage>` components. We'll add a `<TimeAgo>` component to handle formatting a timestamp string as a relative description. Libraries like `date-fns` have some useful utility functions for parsing and formatting dates, which we can use here:
+
+```jsx title="features/posts/TimeAgo.js"
+import React from 'react'
+import { parseISO, formatDistanceToNow } from 'date-fns'
+
+export const TimeAgo = ({ timestamp }) => {
+  let timeAgo = ''
+  if (timestamp) {
+    const date = parseISO(timestamp)
+    const timePeriod = formatDistanceToNow(date)
+    timeAgo = `${timePeriod} ago`
+  }
+
+  return (
+    <span title={timestamp}>
+      &nbsp; <i>{timeAgo}</i>
+    </span>
+  )
+}
+```
+
+### Sorting the Posts List
+
+Our `<PostsList>` is currently showing all the posts in the same order the posts are kept in the Redux store. Our example has the oldest post first, and any time we add a new post, it gets added to the end of the posts array. That means the newest post is always at the bottom of the page.
+
+Typically, social media feeds show the newest posts first, and you scroll down to see older posts. Even though the data is being kept oldest-first in the store, we can reorder the data in our `<PostsList>` component so that the newest post is first. In theory, since we know that the `state.posts` array is already sorted, we _could_ just reverse the list. But, it's better to go ahead and sort it ourselves just to be sure.
+
+Since `array.sort()` mutates the existing array, we need to make a copy of `state.posts` and sort that copy. We know that our `post.date` fields are being kept as date timestamp strings, and we can directly compare those to sort the posts in the right order:
+
+```jsx title="features/posts/PostsList.js"
+// Sort posts in reverse chronological order by datetime string
+//highlight-start
+const orderedPosts = posts.slice().sort((a, b) => b.date.localeCompare(a.date))
+
+const renderedPosts = orderedPosts.map(post => {
+  //highlight-end
+  return (
+    <article className="post-excerpt" key={post.id}>
+      <h3>{post.title}</h3>
+      <div>
+        <PostAuthor userId={post.user} />
+        <TimeAgo timestamp={post.date} />
+      </div>
+      <p className="post-content">{post.content.substring(0, 100)}</p>
+      <Link to={`/posts/${post.id}`} className="button muted-button">
+        View Post
+      </Link>
+    </article>
+  )
+})
+```
+
+### Post Reaction Buttons
+
+We have one more new feature to add for this section. Right now, our posts are kind of boring. We need to make them more exciting, and what better way to do that than letting our friends add reaction emoji to our posts?
+
+We'll add a row of emoji reaction buttons at the bottom of each post in `<PostsList>` and `<SinglePostPage>`. Every time a user clicks one of the reaction buttons, we'll need to update a matching counter field for that post in the Redux store. Since the reaction counter data is in the Redux store, switching between different parts of the app should consistently show the same values in any component that uses that data.
+
+Like with post authors and timestamps, we want to use this everywhere we show posts, so we'll create a `<ReactionButtons>` component that takes a `post` as a prop. We'll start by just showing the buttons inside, with the current reaction counts for each button:
+
+```jsx title="features/posts/ReactionButtons.js"
+import React from 'react'
+
+const reactionEmoji = {
+  thumbsUp: '👍',
+  hooray: '🎉',
+  heart: '❤️',
+  rocket: '🚀',
+  eyes: '👀'
+}
+
+export const ReactionButtons = ({ post }) => {
+  const reactionButtons = Object.entries(reactionEmoji).map(([name, emoji]) => {
+    return (
+      <button key={name} type="button" className="muted-button reaction-button">
+        {emoji} {post.reactions[name]}
+      </button>
+    )
+  })
+
+  return <div>{reactionButtons}</div>
+}
+```
+
+We don't yet have a `post.reactions` field in our data, so we'll need to update the `initialState` post objects and our `postAdded` prepare callback function to make sure that every post has that data inside, like `reactions: {thumbsUp: 0, hooray: 0}`.
+
+Now, we can define a new reducer that will handle updating the reaction count for a post when a user clicks the reaction button.
+
+Like with editing posts, we need to know the ID of the post, and which reaction button the user clicked on. We'll have our `action.payload` be an object that looks like `{id, reaction}`. The reducer can then find the right post object, and update the correct reactions field.
+
+```js
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {
+    // highlight-start
+    reactionAdded(state, action) {
+      const { postId, reaction } = action.payload
+      const existingPost = state.find(post => post.id === postId)
+      if (existingPost) {
+        existingPost.reactions[reaction]++
+      }
+    }
+    // highlight-end
+    // other reducers
+  }
+})
+
+// highlight-next-line
+export const { postAdded, postUpdated, reactionAdded } = postsSlice.actions
+```
+
+As we've seen already, `createSlice` lets us write "mutating" logic in our reducers. If we weren't using `createSlice` and the Immer library, the line `existingPost.reactions[reaction]++` would indeed mutate the existing `post.reactions` object, and this would probably cause bugs elsewhere in our app because we didn't follow the rules of reducers. But, since we _are_ using `createSlice`, we can write this more complex update logic in a simpler way, and let Immer do the work of turning this code into a safe immutable update.
+
+Notice that **our action object just contains the minimum amount of information needed to describe what happened**. We know which post we need to update, and which reaction name was clicked on. We _could_ have calculated the new reaction counter value and put that in the action, but **it's always better to keep the action objects as small as possible, and do the state update calculations in the reducer**. This also means that **reducers can contain as much logic as necessary to calculate the new state**.
+
+:::info
+
+When using Immer, you can either "mutate" an existing state object, or return a new state value yourself, but not both at the same time. See the Immer docs guides on [Pitfalls](https://immerjs.github.io/immer/docs/pitfalls) and [Returning New Data](https://immerjs.github.io/immer/docs/return) for more details.
+
+:::
+
+Our last step is to update the `<ReactionButtons>` component to dispatch the `reactionAdded` action when the user clicks a button:
+
+```jsx title="features/posts/ReactionButtons.jsx"
+import React from 'react'
+// highlight-start
+import { useDispatch } from 'react-redux'
+
+import { reactionAdded } from './postsSlice'
+// highlight-end
+
+const reactionEmoji = {
+  thumbsUp: '👍',
+  hooray: '🎉',
+  heart: '❤️',
+  rocket: '🚀',
+  eyes: '👀'
+}
+
+export const ReactionButtons = ({ post }) => {
+  // highlight-next-line
+  const dispatch = useDispatch()
+
+  const reactionButtons = Object.entries(reactionEmoji).map(([name, emoji]) => {
+    return (
+      <button
+        key={name}
+        type="button"
+        className="muted-button reaction-button"
+        // highlight-start
+        onClick={() =>
+          dispatch(reactionAdded({ postId: post.id, reaction: name }))
+        }
+        // highlight-end
+      >
+        {emoji} {post.reactions[name]}
+      </button>
+    )
+  })
+
+  return <div>{reactionButtons}</div>
+}
+```
+
+Now, every time we click a reaction button, the counter should increment. If we browse around to different parts of the app, we should see the correct counter values displayed any time we look at this post, even if we click a reaction button in the `<PostsList>` and then look at the post by itself on the `<SinglePostPage>`.
+
+## What You've Learned
+
+Here's what our app looks like after all these changes:
+
+<iframe
+  class="codesandbox"
+  src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-example-app/tree/checkpoint-2-reactionButtons/?fontsize=14&hidenavigation=1&theme=dark"
+  title="redux-essentials-example-app"
+  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+></iframe>
+
+It's actually starting to look more useful and interesting!
+
+We've covered a lot of information and concepts in this section. Let's recap the important things to remember:
+
+:::tip
+
+- **Any React component can use data from the Redux store as needed**
+  - Any component can read any data that is in the Redux store
+  - Multiple components can read the same data, even at the same time
+  - Components should extract the smallest amount of data they need to render themselves
+  - Components can combine values from props, state, and the Redux store to determine what UI they need to render. They can read multiple pieces of data from the store, and reshape the data as needed for display.
+  - Any component can dispatch actions to cause state updates
+- **Redux action creators can prepare action objects with the right contents**
+  - `createSlice` and `createAction` can accept a "prepare callback" that returns the action payload
+  - Unique IDs and other random values should be put in the action, not calculated in the reducer
+- **Reducers should contain the actual state update logic**
+  - Reducers can contain whatever logic is needed to calculate the next state
+  - Action objects should contain just enough info to describe what happened
+
+:::
+
+## What's Next?
+
+By now you should be comfortable working with data in the Redux store and React components. So far we've just used data that was in the initial state or added by the user. In [Part 5: Async Logic and Data Fetching](./part-5-async-logic.md), we'll see how to work with data that comes from a server API.
diff --git a/docs/tutorials/essentials/part-5-async-logic.md b/docs/tutorials/essentials/part-5-async-logic.md
new file mode 100644
index 0000000000..fd931e4cc7
--- /dev/null
+++ b/docs/tutorials/essentials/part-5-async-logic.md
@@ -0,0 +1,788 @@
+---
+id: part-5-async-logic
+title: 'Redux Essentials, Part 5: Async Logic and Data Fetching'
+sidebar_label: 'Async Logic and Data Fetching'
+hide_title: true
+description: 'The official Essentials tutorial for Redux: how to use Redux the right way'
+---
+
+import { DetailedExplanation } from '../../components/DetailedExplanation'
+
+# Redux Essentials, Part 5: Async Logic and Data Fetching
+
+:::tip What You'll Learn
+
+- How to use the Redux "thunk" middleware for async logic
+- Patterns for handling async request state
+- How to use the Redux Toolkit `createAsyncThunk` API to simplify async calls
+
+:::
+
+:::info Prerequisites
+
+- Familiarity with using AJAX requests to fetch and update data from a server
+
+:::
+
+## Introduction
+
+In [Part 4: Using Redux Data](./part-4-using-data.md), we saw how to use multiple pieces of data from the Redux store inside of React components, customize the contents of action objects before they're dispatched, and handle more complex update logic in our reducers.
+
+So far, all the data we've worked with has been directly inside of our React client application. However, most real applications need to work with data from a server, by making HTTP API calls to fetch and save items.
+
+In this section, we'll convert our social media app to fetch the posts and users data from an API, and add new posts by saving them to the API.
+
+### Example REST API and Client
+
+To keep the example project isolated but realistic, the initial project setup already included a fake in-memory REST API for our data (configured using [the Mirage.js mock API tool](https://miragejs.com/)). The API uses `/fakeApi` as the base URL for the endpoints, and supports the typical `GET/POST/PUT/DELETE` HTTP methods for `/fakeApi/posts`, `/fakeApi/users`, and `fakeApi/notifications`. It's defined in `src/api/server.js`.
+
+The project also includes a small HTTP API client object that exposes `client.get()` and `client.post()` methods, similar to popular HTTP libraries like `axios`. It's defined in `src/api/client.js`.
+
+We'll use the `client` object to make HTTP calls to our in-memory fake REST API for this section.
+
+Also, the mock server has been set up to reuse the same random seed each time the page is loaded, so that it will generate the same list of fake users and fake posts. If you want to reset that, delete the `'randomTimestampSeed'` value in your browser's Local Storage and reload the page, or you can turn that off by editing `src/api/server.js` and commenting out the `setRandom(rng)` call.
+
+:::info
+
+As a reminder, the code examples focus on the key concepts and changes for each section. See the CodeSandbox projects and the [`tutorial-steps` branch in the project repo](https://github.com/reduxjs/redux-essentials-example-app/tree/tutorial-steps) for the complete changes in the application.
+
+:::
+
+## Thunks and Async Logic
+
+### Using Middleware to Enable Async Logic
+
+By itself, a Redux store doesn't know anything about async logic. It only knows how to synchronously dispatch actions, update the state by calling the root reducer function, and notify the UI that something has changed. Any asynchronicity has to happen outside the store.
+
+But, what if you want to have async logic interact with the store by dispatching or checking the current store state? That's where [Redux middleware](../../advanced/Middleware.md) come in. They extend the store, and allow you to:
+
+- Execute extra logic when any action is dispatched (such as logging the action and state)
+- Pause, modify, delay, replace, or halt dispatched actions
+- Write extra code that has access to `dispatch` and `getState`
+- Teach `dispatch` how to accept other values besides plain action objects, such as functions and promises, by intercepting them and dispatching real action objects instead
+
+[The most common reason to use middleware is to allow different kinds of async logic to interact with the store](../../faq/Actions.md#how-can-i-represent-side-effects-such-as-ajax-calls-why-do-we-need-things-like-action-creators-thunks-and-middleware-to-do-async-behavior)This allows you to write code that can dispatch actions and check the store state, while keeping that logic separate from your UI.
+
+There are many kinds of async middleware for Redux, and each lets you write your logic using different syntax. The most common async middleware is [`redux-thunk`](https://github.com/reduxjs/redux-thunk), which lets you write plain functions that may contain async logic directly. Redux Toolkit's `configureStore` function [automatically sets up the thunk middleware by default](https://redux-toolkit.js.org/api/getDefaultMiddleware#included-default-middleware), and [we recommend using thunks as the standard approach for writing async logic with Redux](../../style-guide/style-guide.md#use-thunks-for-async-logic).
+
+### Thunk Functions
+
+Once the thunk middleware has been added to the Redux store, it allows you to pass _thunk functions_ directly to `store.dispatch`. A thunk function will always be called with `(dispatch, getState)` as its arguments, and you can use them inside the thunk as needed.
+
+Thunks typically dispatch plain actions using action creators, like `dispatch(increment())`:
+
+```js
+const store = configureStore({ reducer: counterReducer })
+
+const exampleThunkFunction = (dispatch, getState) => {
+  const stateBefore = getState()
+  console.log(`Counter before: ${stateBefore.counter}`)
+  dispatch(increment())
+  const stateAfter = getState()
+  console.log(`Counter after: ${stateAfter.counter}`)
+}
+
+store.dispatch(exampleThunkFunction)
+```
+
+For consistency with dispatching normal action objects, we typically write these as _thunk action creators_, which return the thunk function. These action creators can take arguments that can be used inside the thunk.
+
+```js
+const logAndAdd = amount => {
+  return (dispatch, getState) => {
+    const stateBefore = getState()
+    console.log(`Counter before: ${stateBefore.counter}`)
+    dispatch(incrementByAmount(amount))
+    const stateAfter = getState()
+    console.log(`Counter after: ${stateAfter.counter}`)
+  }
+}
+
+store.dispatch(logAndAdd(5))
+```
+
+Thunks are typically written in "slice" files. `createSlice` itself does not have any special support for defining thunks, so you should write them as separate functions in the same slice file. That way, they have access to the plain action creators for that slice, and it's easy to find where the thunk lives.
+
+### Writing Async Thunks
+
+Thunks may have async logic inside of them, such as `setTimeout`, `Promise`s, and `async/await`. This makes them a good place to put AJAX calls to a server API.
+
+Data fetching logic for Redux typically follows a predictable pattern:
+
+- A "start" action is dispatched before the request, to indicate that the request is in progress. This may be used to track loading state to allow skipping duplicate requests or show loading indicators in the UI.
+- The async request is made
+- Depending on the request result, the async logic dispatches either a "success" action containing the result data, or a "failure" action containing error details. The reducer logic clears the loading state in both cases, and either processes the result data from the success case, or stores the error value for potential display.
+
+These steps are not _required_, but are commonly used. (If all you care about is a successful result, you can just dispatch a single "success" action when the request finishes, and skip the "start" and "failure" actions.)
+
+Redux Toolkit provides a `createAsyncThunk` API to implement the creation and dispatching of these actions, and we'll look at how to use it shortly.
+
+<DetailedExplanation title="Detailed Explanation: Dispatching Request Status Actions in Thunks">
+
+If we were to write out the code for a typical async thunk by hand, it might look like this:
+
+```js
+const getRepoDetailsStarted = () => ({
+  type: "repoDetails/fetchStarted"
+})
+const getRepoDetailsSuccess = (repoDetails) => {
+  type: "repoDetails/fetchSucceeded",
+  payload: repoDetails
+}
+const getRepoDetailsFailed = (error) => {
+  type: "repoDetails/fetchFailed",
+  error
+}
+const fetchIssuesCount = (org, repo) => async dispatch => {
+  dispatch(getRepoDetailsStarted())
+  try {
+    const repoDetails = await getRepoDetails(org, repo)
+    dispatch(getRepoDetailsSuccess(repoDetails))
+  } catch (err) {
+    dispatch(getRepoDetailsFailed(err.toString()))
+  }
+}
+```
+
+However, writing code using this approach is tedious. Each separate type of request needs repeated similar implementation:
+
+- Unique action types need to be defined for the three different cases
+- Each of those action types usually has a corresponding action creator function
+- A thunk has to be written that dispatches the correct actions in the right sequence
+
+`createAsyncThunk` abstracts this pattern by generating the action types and action creators, and generating a thunk that dispatches those actions automatically. You provide a callback function that makes the async call and returns a Promise with the result.
+
+</DetailedExplanation>
+
+## Loading Posts
+
+So far, our `postsSlice` has used some hardcoded sample data as its initial state. We're going to switch that to start with an empty array of posts instead, and then fetch a list of posts from the server.
+
+In order to do that, we're going to have to change the structure of the state in our `postsSlice`, so that we can keep track of the current state of the API request.
+
+### Extracting Posts Selectors
+
+Right now, the `postsSlice` state is a single array of `posts`. We need to change that to be an object that has the `posts` array, plus the loading state fields.
+
+Meanwhile, the UI components like `<PostsList>` are trying to read posts from `state.posts` in their `useSelector` hooks, assuming that that field is an array. We need to change those locations also to match the new data.
+
+It would be nice if we didn't have to keep rewriting our components every time we made a change to the data format in our reducers. One way to avoid this is to define reusable selector functions in the slice files, and have the components use those selectors to extract the data they need instead of repeating the selector logic in each component. That way, if we do change our state structure again, we only need to update the code in the slice file.
+
+The `<PostsList>` component needs to read a list of all the posts, and the `<SinglePostPage>` and `<EditPostForm>` components need to look up a single post by its ID. Let's export two small selector functions from `postsSlice.js` to cover those cases:
+
+```js title="features/posts/postsSlice.js"
+const postsSlice = createSlice(/* omit slice code*/)
+
+export const { postAdded, postUpdated, reactionAdded } = postsSlice.actions
+
+export default postsSlice.reducer
+
+// highlight-start
+export const selectAllPosts = state => state.posts
+
+export const selectPostById = (state, postId) =>
+  state.posts.find(post => post.id === postId)
+//highlight-end
+```
+
+Note that the `state` parameter for these selector functions is the root Redux state object, as it was for the inlined anonymous selectors we wrote directly inside of `useSelector`.
+
+We can then use them in the components:
+
+```js title="features/posts/PostsList.js"
+// omit imports
+// highlight-next-line
+import { selectAllPosts } from './postsSlice'
+
+export const PostsList = () => {
+  // highlight-next-line
+  const posts = useSelector(selectAllPosts)
+  // omit component contents
+}
+```
+
+```js title="features/posts/EditPostForm.js"
+// omit imports
+//highlight-next-line
+import { selectPostById } from './postsSlice'
+
+export const SinglePostPage = ({ match }) => {
+  const { postId } = match.params
+
+  // highlight-next-line
+  const post = useSelector(state => selectPostById(state, postId))
+  // omit component logic
+}
+```
+
+It's often a good idea to encapsulate data lookups by writing reusable selectors. You can also create "memoized" selectors that can help improve performance, which we'll look at in a later part of this tutorial.
+
+But, like any abstraction, it's not something you should do _all_ the time, everywhere. Writing selectors means more code to understand and maintain. **Don't feel like you need to write selectors for every single field of your state**. Try starting without any selectors, and add some later when you find yourself looking up the same values in many parts of your application code.
+
+### Loading State for Requests
+
+When we make an API call, we can view its progress as a small state machine that can be in one of four possible states:
+
+- The request hasn't started yet
+- The request is in progress
+- The request succeeded, and we now have the data we need
+- The request failed, and there's probably an error message
+
+We _could_ track that information using some booleans, like `isLoading: true`, but it's better to track these states as a single enum value. A good pattern for this is to have a state section that looks like:
+
+```ts
+{
+  status: 'idle' | 'loading' | 'succeeded' | 'failed',
+  error: string | null
+}
+```
+
+These fields would exist alongside whatever actual data is being stored. These specific string state names aren't required - feel free to use other names if you want, like `'pending'` instead of `'loading'`, or `'complete'` instead of `'succeeded'`.
+
+We can use this information to decide what to show in our UI as the request progresses, and also add logic in our reducers to prevent cases like loading data twice.
+
+Let's update our `postsSlice` to use this pattern to track loading state for a "fetch posts" request. We'll switch our state from being an array of posts by itself, to look like `{posts, status, error}`. We'll also remove the old sample post entries from our initial state. As part of this change, we also need to change any uses of `state` as an array to be `state.posts` instead, because the array is now one level deeper:
+
+```js title="features/posts/postsSlice.js"
+import { createSlice, nanoid } from '@reduxjs/toolkit'
+
+// highlight-start
+const initialState = {
+  posts: [],
+  status: 'idle',
+  error: null
+}
+//highlight-end
+
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {
+    postAdded: {
+      reducer(state, action) {
+        // highlight-next-line
+        state.posts.push(action.payload)
+      },
+      prepare(title, content, userId) {
+        // omit prepare logic
+      }
+    },
+    reactionAdded(state, action) {
+      const { postId, reaction } = action.payload
+      // highlight-next-line
+      const existingPost = state.posts.find(post => post.id === postId)
+      if (existingPost) {
+        existingPost.reactions[reaction]++
+      }
+    },
+    postUpdated(state, action) {
+      const { id, title, content } = action.payload
+      // highlight-next-line
+      const existingPost = state.posts.find(post => post.id === id)
+      if (existingPost) {
+        existingPost.title = title
+        existingPost.content = content
+      }
+    }
+  }
+})
+
+export const { postAdded, postUpdated, reactionAdded } = postsSlice.actions
+
+export default postsSlice.reducer
+
+// highlight-start
+export const selectAllPosts = state => state.posts.posts
+
+export const selectPostById = (state, postId) =>
+  state.posts.posts.find(post => post.id === postId)
+// highlight-end
+```
+
+Yes, this _does_ mean that we now have a nested object path that looks like `state.posts.posts`, which is somewhat repetitive and silly :) We _could_ change the nested array name to be `items` or `data` or something if we wanted to avoid that, but we'll leave it as-is for now.
+
+### Fetching Data with `createAsyncThunk`
+
+Redux Toolkit's `createAsyncThunk` API generates thunks that automatically dispatch those "start/success/failure" actions for you.
+
+Let's start by adding a thunk that will make an AJAX call to retrieve a list of posts. We'll import the `client` utility from the `src/api` folder, and use that to make a request to `'/fakeApi/posts'`.
+
+```js title="features/posts/postsSlice"
+// highlight-next-line
+import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'
+// highlight-next-line
+import { client } from '../../api/client'
+
+const initialState = {
+  posts: [],
+  status: 'idle',
+  error: null
+}
+
+// highlight-start
+export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
+  const response = await client.get('/fakeApi/posts')
+  return response.posts
+})
+// highlight-end
+```
+
+`createAsyncThunk` accepts two arguments:
+
+- A string that will be used as the prefix for the generated action types
+- A "payload creator" callback function that should return a `Promise` containing some data, or a rejected `Promise` with an error
+
+The payload creator will usually make an AJAX call of some kind, and can either return the `Promise` from the AJAX call directly, or extract some data from the API response and return that. We typically write this using the JS `async/await` syntax, which lets us write functions that use `Promise`s while using standard `try/catch` logic instead of `somePromise.then()` chains.
+
+In this case, we pass in `'posts/fetchPosts'` as the action type prefix. Our payload creation callback waits for the API call to return a response. The response object looks like `{posts: []}`, and we want our dispatched Redux action to have a payload that is _just_ the array of posts. So, we extract `response.posts`, and return that from the callback.
+
+If we try calling `dispatch(fetchPosts())`, the `fetchPosts` thunk will first dispatch an action type of `'posts/fetchPosts/pending'`:
+
+![`createAsyncThunk`: posts pending action](/img/tutorials/essentials/devtools-posts-pending.png)
+
+We can listen for this action in our reducer and mark the request status as `'loading'`.
+
+Once the `Promise` resolves, the `fetchPosts` thunk takes the `response.posts` array we returned from the callback, and dispatches a `posts/fetchPosts/fulfilled'` action containing the posts array as `action.payload`:
+
+![`createAsyncThunk`: posts pending action](/img/tutorials/essentials/devtools-posts-fulfilled.png)
+
+#### Dispatching Thunks from Components
+
+So, let's update our `<PostsList>` component to actually fetch this data automatically for us.
+
+We'll import the `fetchPosts` thunk into the component. Like all of our other action creators, we have to dispatch it, so we'll also need to add the `useDispatch` hook. Since we want to fetch this data when `<PostsList>` mounts, we need to import the React `useEffect` hook:
+
+```js title="features/posts/PostsList.js"
+// highlight-start
+import React, { useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+// omit other imports
+// highlight-end
+//highlight-next-line
+import { selectAllPosts, fetchPosts } from './postsSlice'
+
+export const PostsList = () => {
+  // highlight-next-line
+  const dispatch = useDispatch()
+  const posts = useSelector(selectAllPosts)
+
+  // highlight-start
+  const postStatus = useSelector(state => state.posts.status)
+
+  useEffect(() => {
+    if (postStatus === 'idle') {
+      dispatch(fetchPosts())
+    }
+  }, [postStatus, dispatch])
+  // highlight-end
+
+  // omit rendering logic
+}
+```
+
+It's important that we only try to fetch the list of posts once. If we do it every time the `<PostsList>` component renders, or is re-created because we've switched between views, we might end up fetching the posts several times. We can use the `posts.status` enum to help decide if we need to actually start fetching, by selecting that into the component and only starting the fetch if the status is `'idle'`.
+
+#### Reducers and Loading Actions
+
+Next up, we need to handle both these actions in our reducers. This requires a bit deeper look at the `createSlice` API we've been using.
+
+We've already seen that `createSlice` will generate an action creator for every reducer function we define in the `reducers` field, and that the generated action types include the name of the slice, like:
+
+```js
+console.log(
+  postUpdated({ id: '123', title: 'First Post', content: 'Some text here' })
+)
+/*
+{
+  type: 'posts/postUpdated',
+  payload: {
+    id: '123',
+    title: 'First Post',
+    content: 'Some text here'
+  }
+}
+*/
+```
+
+However, there are times when a slice reducer needs to respond to _other_ actions that weren't defined as part of this slice's `reducers` field. We can do that using the slice `extraReducers` field instead.
+
+<DetailedExplanation title="Detailed Explanation: Adding Extra Reducers to Slices">
+
+The keys in the `extraReducers` object should be Redux action type strings, like `'counter/increment'`. We _could_ write those by hand ourselves, although we'd have to quote the keys if they contain any characters like '/':
+
+```js
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {
+    // slice-specific reducers here
+  },
+  extraReducers: {
+    'counter/increment': (state, action) => {
+      // normal reducer logic to update the posts slice
+    }
+  }
+})
+```
+
+However, action creators generated by Redux Toolkit automatically return their action type string if you call `actionCreator.toString()`. This means we can pass them as ES6 object literal computed properties, and the action types will become the keys of the object:
+
+```js
+import { increment } from '../features/counter/counterSlice'
+const object = {
+  [increment]: () => {}
+}
+console.log(object)
+// { "counter/increment": Function}
+```
+
+This works for the `extraReducers` field:
+
+```js
+import { increment } from '../features/counter/counterSlice'
+
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {
+    // slice-specific reducers here
+  },
+  extraReducers: {
+    // highlight-next-line
+    [increment]: (state, action) => {
+      // normal reducer logic to update the posts slice
+    }
+  }
+})
+```
+
+We can also add extra reducers by using the "builder callback" syntax for `extraReducers`. If we pass a function for `extraReducers` instead of an object, we can use the `builder` parameter to add individual cases. The `builder.addCase()` function takes either a plain string action type to listen for, or a Redux Toolkit action creator:
+
+```js
+import { increment } from '../features/counter/counterSlice'
+
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {
+    // slice-specific reducers here
+  },
+  // highlight-start
+  extraReducers: builder => {
+    builder.addCase('counter/decrement', (state, action) => {})
+    builder.addCase(increment, (state, action) => {})
+  }
+  // highlight-end
+})
+```
+
+If you're using TypeScript, you should use the builder callback form of `extraReducers`.
+
+</DetailedExplanation>
+
+In this case, we need to listen for the "pending" and "fulfilled" action types dispatched by our `fetchPosts` thunk. Those action creators are attached to our actual `fetchPost` function, and we can pass those to `extraReducers` to listen for those actions:
+
+```js
+export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
+  const response = await client.get('/fakeApi/posts')
+  return response.posts
+})
+
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {
+    // omit existing reducers here
+  },
+  // highlight-start
+  extraReducers: {
+    [fetchPosts.pending]: (state, action) => {
+      state.status = 'loading'
+    },
+    [fetchPosts.fulfilled]: (state, action) => {
+      state.status = 'succeeded'
+      // Add any fetched posts to the array
+      state.posts = state.posts.concat(action.payload)
+    },
+    [fetchPosts.rejected]: (state, action) => {
+      state.status = 'failed'
+      state.error = action.payload
+    }
+  }
+  // highlight-end
+})
+```
+
+We'll handle all three action types that could be dispatched by the thunk, based on the `Promise` we returned:
+
+- When the request starts, we'll set the `status` enum to `'loading'`
+- If the request succeeds, we mark the `status` as `'succeeded'`, and add the fetched posts to `state.posts`
+- If the request fails, we'll mark the `status` as `'failed'`, and save any error message into the state so we can display it
+
+### Displaying Loading State
+
+Our `<PostsList>` component is already checking for any updates to the posts that are stored in Redux, and rerendering itself any time that list changes. So, if we refresh the page, we should see a random set of posts from our fake API show up on screen:
+
+The fake API we're using returns data immediately. However, a real API call will probably take some time to return a response. It's usually a good idea to show some kind of "loading..." indicator in the UI so the user knows we're waiting for data.
+
+We can update our `<PostsList>` to show a different bit of UI based on the `state.posts.status` enum: a spinner if we're loading, an error message if it failed, or the actual posts list if we have the data. The result might look like this:
+
+```js title="features/posts/PostsList.js"
+export const PostsList = () => {
+  const dispatch = useDispatch()
+  const posts = useSelector(selectAllPosts)
+
+  const postStatus = useSelector(state => state.posts.status)
+  const error = useSelector(state => state.posts.error)
+
+  useEffect(() => {
+    if (postStatus === 'idle') {
+      dispatch(fetchPosts())
+    }
+  }, [postStatus, dispatch])
+
+  // highlight-start
+  let content
+
+  if (postStatus === 'loading') {
+    content = <div className="loader">Loading...</div>
+  } else if (postStatus === 'succeeded') {
+    // Sort posts in reverse chronological order by datetime string
+    const orderedPosts = posts
+      .slice()
+      .sort((a, b) => b.date.localeCompare(a.date))
+
+    content = orderedPosts.map(post => (
+      <PostExcerpt key={post.id} post={post} />
+    ))
+  } else if (postStatus === 'error') {
+    content = <div>{error}</div>
+  }
+  // highlight-end
+
+  return (
+    <section className="posts-list">
+      <h2>Posts</h2>
+      {content}
+    </section>
+  )
+}
+```
+
+But, the fake API call is still returning almost immediately, so we can barely see the loading spinner right now. If you want to force the fake API call to take longer, you can open up `api/server.js`, and uncomment this line:
+
+```js title="api/server.js"
+//this.timing = 2000
+```
+
+Uncommenting that line will force the fake API to wait 2 seconds before responding. Feel free to turn that on and off as we go if you want to see how the UI shows our loading spinner.
+
+## Loading Users
+
+We're now fetching and displaying our list of posts. But, if we look at the posts, there's a problem: they all now say "Unknown User" as the authors:
+
+![Unknown post authors](/img/tutorials/essentials/posts-unknownAuthor.png)
+
+This is because the post entries are being randomly generated by the fake API server, which also randomly generates a set of fake users every time we reload the page. We need to update our users slice to fetch those users when the application starts.
+
+Like last time, we'll create another async thunk to get the users from the API and return them, then handle the `fulfilled` action in the `extraReducers` slice field. We'll skip worrying about loading state for now:
+
+```js title="features/users/usersSlice.js"
+// highlight-start
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+import { client } from '../../api/client'
+// highlight-end
+
+const initialState = []
+
+// highlight-start
+export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
+  const response = await client.get('/fakeApi/users')
+  return response.users
+})
+// highlight-end
+
+const usersSlice = createSlice({
+  name: 'users',
+  initialState,
+  reducers: {},
+  // highlight-start
+  extraReducers: {
+    [fetchUsers.fulfilled]: (state, action) => {
+      return action.payload
+    }
+  }
+  // highlight-end
+})
+
+export default usersSlice.reducer
+```
+
+We only need to fetch the list of users once, and we want to do it right when the application starts. We can do that in our `index.js` file, and directly dispatch the `fetchUsers` thunk because we have the `store` right there:
+
+```js title="index.js"
+// omit imports
+
+// highlight-next-line
+import { fetchUsers } from './features/users/usersSlice'
+
+import './api/server'
+
+// highlight-next-line
+store.dispatch(fetchUsers())
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </React.StrictMode>,
+  document.getElementById('root')
+)
+```
+
+Now, each of the posts should be showing a username again, and we should also have that same list of users shown in the "Author" dropdown in our `<AddPostForm>`.
+
+## Adding New Posts
+
+We have one more step for this section. When we add a new post from the `<AddPostForm>`, that post is only getting added to the Redux store inside our app. We need to actually make an API call that will create the new post entry in our fake API server instead, so that it's "saved". (Since this is a fake API, the new post won't persist if we reload the page, but if we had a real backend server it would be available next time we reload.)
+
+### Sending Data with Thunks
+
+We can use `createAsyncThunk` to help with sending data, not just fetching it. We'll create a thunk that accepts the values from our `<AddPostForm>` as an argument, and makes an HTTP POST call to the fake API to save the data.
+
+In the process, we're going to change how we work with the new post object in our reducers. Currently, our `postsSlice` is creating a new post object in the `prepare` callback for `postAdded`, and generating a new unique ID for that post. In most apps that save data to a server, the server will take care of generating unique IDs and filling out any extra fields, and will usually return the completed data in its response. So, we can send a request body like `{ title, content, user: userId }` to the server, and then take the complete post object it sends back and add it to our `postsSlice` state.
+
+```js title="features/posts/postsSlice.js"
+// highlight-start
+export const addNewPost = createAsyncThunk(
+  'posts/addNewPost',
+  // The payload creator receives the partial `{title, content, user}` object
+  async initialPost => {
+    // We send the initial data to the fake API server
+    const response = await client.post('/fakeApi/posts', { post: initialPost })
+    // The response includes the complete post object, including unique ID
+    return response.post
+  }
+)
+// highlight-end
+
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {
+    // The existing `postAdded` reducer and prepare callback were deleted
+    reactionAdded(state, action) {}, // omit logic
+    postUpdated(state, action) {} // omit logic
+  },
+  extraReducers: {
+    // omit posts loading reducers
+    // highlight-start
+    [addNewPost.fulfilled]: (state, action) => {
+      // We can directly add the new post object to our posts array
+      state.posts.push(action.payload)
+    }
+    // highlight-end
+  }
+})
+```
+
+### Checking Thunk Results in Components
+
+Finally, we'll update `<AddPostForm>` to dispatch the `addNewPost` thunk instead the old `postUpdated` action. Since this is another API call to the server, it will take some time and _could_ fail. The `addNewPost()` thunk will automatically dispatch its `pending/fulfilled/rejected` actions to the Redux store, which we're already handling. We _could_ track the request status in `postsSlice` using a second loading enum if we wanted to, but for this example let's keep the loading state tracking limited to the component.
+
+It would be good if we can at least disable the "Save Post" button while we're waiting for the request, so the user can't accidentally try to save a post twice. If the request fails, we might also want to show an error message here in the form, or perhaps just log it to the console.
+
+We can have our component logic wait for the async thunk to finish, and check the result when it's done:
+
+```js title="features/posts/AddPostForm.js"
+import React, { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+// highlight-next-line
+import { unwrapResult } from '@reduxjs/toolkit'
+
+// highlight-next-line
+import { addNewPost } from './postsSlice'
+
+export const AddPostForm = () => {
+  const [title, setTitle] = useState('')
+  const [content, setContent] = useState('')
+  const [userId, setUserId] = useState('')
+  // highlight-next-line
+  const [addRequestStatus, setAddRequestStatus] = useState('idle')
+
+  // omit useSelectors and change handlers
+
+  // highlight-start
+  const canSave =
+    [title, content, userId].every(Boolean) && addRequestStatus === 'idle'
+
+  const onSavePostClicked = async () => {
+    if (canSave) {
+      try {
+        setAddRequestStatus('pending')
+        const resultAction = await dispatch(
+          addNewPost({ title, content, user: userId })
+        )
+        unwrapResult(resultAction)
+        setTitle('')
+        setContent('')
+        setUserId('')
+      } catch (err) {
+        console.error('Failed to save the post: ', err)
+      } finally {
+        setAddRequestStatus('idle')
+      }
+    }
+  }
+  // highlight-end
+
+  // omit rendering logic
+}
+```
+
+We can add a loading status enum field as a React `useState` hook, similar to how we're tracking loading state in `postsSlice` for fetching posts. In this case, we just want to know if the request is in progress or not.
+
+When we call `dispatch(addNewPost())`, the async thunk returns a `Promise` from `dispatch`. We can `await` that promise here to know when the thunk has finished its request. But, we don't yet know if that request succeeded or failed.
+
+`createAsyncThunk` handles any errors internally, so that we don't see any messages about "rejected Promises" in our logs. It then returns the final action it dispatched: either the `fulfilled` action if it succeeded, or the `rejected` action if it failed. Redux Toolkit has a utility function called `unwrapResult` that will return either the actual `action.payload` value from a `fulfilled` action, or throw an error if it's the `rejected` action. This lets us handle success and failure in the component using normal `try/catch` logic. So, we'll clear out the input fields to reset the form if the post was successfully created, and log the error to the console if it failed.
+
+If you want to see what happens when the `addNewPost` API call fails, try creating a new post where the "Content" field only has the word "error" (without quotes). The server will see that and send back a failed response, so you should see a message logged to the console.
+
+## What You've Learned
+
+Async logic and data fetching are always a complex topic. As you've seen, Redux Toolkit includes some tools to automate the typical Redux data fetching patterns.
+
+Here's what our app looks like now that we're fetching data from that fake API:
+
+<iframe
+  class="codesandbox"
+  src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-example-app/tree/checkpoint-3-postRequests/?fontsize=14&hidenavigation=1&theme=dark"
+  title="redux-essentials-example-app"
+  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+></iframe>
+
+As a reminder, here's what we covered in this section:
+
+:::tip
+
+- **You can write reusable "selector" functions to encapsulate reading values from the Redux state**
+  - Selectors are functions that get the Redux `state` as an argument, and return some data
+- **Redux uses plugins called "middleware" to enable async logic**
+  - The standard async middleware is called `redux-thunk`, which is included in Redux Toolkit
+  - Thunk functions receive `dispatch` and `getState` as arguments, and can use those as part of async logic
+- **You can dispatch additional actions to help track the loading status of an API call**
+  - The typical pattern is dispatching a "pending" action before the call, then either a "success" containing the data or a "failure" action containing the error
+  - Loading state should usually be stored as an enum, like `'idle' | 'loading' | 'succeeded' | 'failed'`
+- **Redux Toolkit has a `createAsyncThunk` API that dispatches these actions for you**
+  - `createAsyncThunk` accepts a "payload creator" callback that should return a `Promise`, and generates `pending/fulfilled/rejected` action types automatically
+  - Generated action creators like `fetchPosts` dispatch those actions based on the `Promise` you return
+  - You can listen for these action types in `createSlice` using the `extraReducers` field, and update the state in reducers based on those actions.
+  - Action creators can be used to automatically fill in the keys of the `extraReducers` object so the slice knows what actions to listen for.
+
+:::
+
+## What's Next?
+
+We've got one more set of topics to cover for this tutorial. In [Part 6: Performance and Normalizing Data](./part-6-performance-normalization.md), we'll look at how Redux usage affects React performance, and some ways we can optimize our application for improved performance.
diff --git a/docs/tutorials/essentials/part-6-performance-normalization.md b/docs/tutorials/essentials/part-6-performance-normalization.md
new file mode 100644
index 0000000000..e90eca8cef
--- /dev/null
+++ b/docs/tutorials/essentials/part-6-performance-normalization.md
@@ -0,0 +1,951 @@
+---
+id: part-6-performance-normalization
+title: 'Redux Essentials, Part 6: Performance and Normalizing Data'
+sidebar_label: 'Performance and Normalizing Data'
+hide_title: true
+description: 'The official Essentials tutorial for Redux: how to use Redux the right way'
+---
+
+import { DetailedExplanation } from '../../components/DetailedExplanation'
+
+# Redux Essentials, Part 6: Performance and Normalizing Data
+
+:::tip What You'll Learn
+
+- How to create memoized selector functions with `createSelector`
+- Patterns for optimizing component rendering performance
+- How to use `createEntityAdapter` to store and update normalized data
+
+:::
+
+:::info Prerequisites
+
+- Completion of the previous sections of this tutorial
+
+:::
+
+## Introduction
+
+In [Part 5: Async Logic and Data Fetching](./part-5-async-logic.md), we saw how write async thunks to fetch data from a server API, patterns for handling async request loading state, and use of selector functions for encapsulating lookups of data from the Redux state.
+
+In this final section, we'll look at optimized patterns for ensuring good performance in our application, and techniques for automatically handling common updates of data in the store.
+
+So far, most of our functionality has been centered around the `posts` feature. We're going to add a couple new sections of the app. After those are added, we'll look at some specific details of how we've built things, and talk about some weaknesses with what we've built so far and how we can improve the implementation.
+
+## Adding User Pages
+
+We're fetching a list of users from our fake API, and we can choose a user as the author when we add a new post. But, a social media app needs the ability to look at the page for a specific user and see all the posts they've made. Let's add a page to show the list of all users, and another to show all posts by a specific user.
+
+We'll start by adding a new `<UsersList>` component. It follows the usual pattern of reading some data from the store with `useSelector`, and mapping over the array to show a list of users with links to their individual pages:
+
+```jsx title="features/users/UsersList.js"
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { selectAllUsers } from './usersSlice'
+
+export const UsersList = () => {
+  const users = useSelector(selectAllUsers)
+
+  const renderedUsers = users.map(user => (
+    <li key={user.id}>
+      <Link to={`/users/${user.id}`}>{user.name}</Link>
+    </li>
+  ))
+
+  return (
+    <section>
+      <h2>Users</h2>
+
+      <ul>{renderedUsers}</ul>
+    </section>
+  )
+}
+```
+
+We don't yet have a `selectAllUsers` selector, so we'll need to add that to `usersSlice.js` along with a `selectUserById` selector:
+
+```js title="features/users/usersSlice.js"
+export default usersSlice.reducer
+
+// highlight-start
+export const selectAllUsers = state => state.users
+
+export const selectUserById = (state, userId) =>
+  state.users.find(user => user.id === userId)
+// highlight-end
+```
+
+And we'll add a `<UserPage>`, which is similar to our `<SinglePostPage>` in taking a `userId` parameter from the router:
+
+```jsx title="features/users/UserPage.js"
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+import { selectUserById } from '../users/usersSlice'
+import { selectAllPosts } from '../posts/postsSlice'
+
+export const UserPage = ({ match }) => {
+  const { userId } = match.params
+
+  const user = useSelector(state => selectUserById(state, userId))
+
+  const postsForUser = useSelector(state => {
+    const allPosts = selectAllPosts(state)
+    return allPosts.filter(post => post.user === userId)
+  })
+
+  const postTitles = postsForUser.map(post => (
+    <li key={post.id}>
+      <Link to={`/posts/${post.id}`}>{post.title}</Link>
+    </li>
+  ))
+
+  return (
+    <section>
+      <h2>{user.name}</h2>
+
+      <ul>{postTitles}</ul>
+    </section>
+  )
+}
+```
+
+As we've seen before, we can take data from one `useSelector` call, or from props, and use that to to help decide what to read from the store in another `useSelector` call.
+
+Add routes for these components in `<App>`:
+
+```jsx title="App.js"
+          <Route exact path="/posts/:postId" component={SinglePostPage} />
+          <Route exact path="/editPost/:postId" component={EditPostForm} />
+          // highlight-start
+          <Route exact path="/users" component={UsersList} />
+          <Route exact path="/users/:userId" component={UserPage} />
+          // highlight-end
+          <Redirect to="/" />
+```
+
+And add another tab in `<Navbar>` that links to `/users` so that we can click and go to `<UsersList>`.
+
+## Adding Notifications
+
+No social media app would be complete without some notifications popping up to tell us that someone has sent a message, left a comment, or reacted to one of our posts.
+
+In a real application, our app client would be in constant communication with the backend server, and the server would push an update to the client every time something happens. Since this is a small example app, we're going to mimic that process by adding a button to actually fetch some notification entries from our fake API. We also don't have any other _real_ users sending messages or reacting to posts, so the fake API will just create some random notification entries every time we make a request. (Remember, the goal here is to see how to use Redux itself.)
+
+### Notifications Slice
+
+Since this is a new part of our app, the first step is to create a new slice for our notifications, and an async thunk to fetch some notification entries from the API:
+
+```js title="features/notifications/notificationsSlice.js"
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+
+import { client } from '../../api/client'
+
+export const fetchNotifications = createAsyncThunk(
+  'notifications/fetchNotifications',
+  async (_, { getState }) => {
+    const allNotifications = selectAllNotifications(getState())
+    const [latestNotification] = allNotifications.slice(-1)
+    const latestTimestamp = latestNotification ? latestNotification.date : ''
+    const response = await client.get(
+      `/fakeApi/notifications?since=${latestTimestamp}`
+    )
+    return response.notifications
+  }
+)
+
+const notificationsSlice = createSlice({
+  name: 'notifications',
+  initialState: [],
+  reducers: {},
+  extraReducers: {
+    [fetchNotifications.fulfilled]: (state, action) => {
+      state.push(...action.payload)
+      // Sort with newest last
+      state.sort((a, b) => b.date.localeCompare(a.date))
+    }
+  }
+})
+
+export default notificationsSlice.reducer
+
+export const selectAllNotifications = state => state.notifications
+```
+
+As with the other slices, import `notificationsReducer` into `store.js` and add it to the `configureStore()` call.
+
+We've written an async thunk called `fetchNotifications`, which will retrieve a list of new notifications from the server. As part of that, we want to use the creation timestamp of the most recent notification as part of our request, so that the server knows it should only send back notifications that are actually new.
+
+We know that we will be getting back an array of notifications, so we can pass them as separate arguments to `state.push()`, and the array will add each item. We also want to make sure that they're sorted so that the most recent notification is last in the array, just in case the server were to send them out of order. (As a reminder, `array.sort()` always mutates the existing array - this is only safe because we're using `createSlice` and Immer inside.)
+
+### Thunk Arguments
+
+If you look at our `fetchNotifications` thunk, it has something new that we haven't seen before. Let's talk about thunk arguments for a minute.
+
+We've already seen that we can pass an argument into a thunk action creator when we dispatch it, like `dispatch(addPost(newPost))`. For `createAsyncThunk` specifically, you can only pass in one argument, and whatever we pass in becomes the first argument of the payload creation callback.
+
+The second argument to our payload creator is a `thunkAPI` object containing several useful functions and pieces of information:
+
+- `dispatch` and `getState`: the actual `dispatch` and `getState` methods from our Redux store. You can use these inside the thunk to dispatch more actions, or get the latest Redux store state (such as reading an updated value after another action is dispatched).
+- `extra`: the "extra argument" that can be passed into the thunk middleware when creating the store. This is typically some kind of API wrapper, such as a set of functions that know how to make API calls to your application's server and return data, so that your thunks don't have to have all the URLs and query logic directly inside.
+- `requestId`: a unique random ID value for this thunk call. Useful for tracking status of an individual request.
+- `signal`: An `AbortController.signal` function that can be used to cancel an in-progress request.
+- `rejectWithValue`: a utility that helps customize the contents of a `rejected` action if the thunk receives an error.
+
+(If you're writing a thunk by hand instead of using `createAsyncThunk`, the thunk function will get`(dispatch, getState)` as separate arguments, instead of putting them together in one object.)
+
+:::info
+
+For more details on these arguments and how to handle canceling thunks and requests, see [the `createAsyncThunk` API reference page](https://redux-toolkit.js.org/api/createAsyncThunk).
+
+:::
+
+In this case, we know that the list of notifications is in our Redux store state, and that the latest notification should be last in the array. We can destructure the `getState` function out of the `thunkAPI` object, call it to read the state value, and use the `selectAllNotifications` selector to give us just the array of notifications. Then, to get the last item in the array, we can use `allNotifications.slice(-1)` to create a new array with just the last item, and destructure that. (It's a bit tricky, but also nicer to read than doing `allNotifications[allNotifications.length - 1]`.)
+
+### Adding the Notifications List
+
+With that slice created, we can add a `<NotificationsList>` component:
+
+```jsx title="features/notifications/NotificationsList.js"
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { formatDistanceToNow, parseISO } from 'date-fns'
+
+import { selectAllUsers } from '../users/usersSlice'
+
+import { selectAllNotifications } from './notificationsSlice'
+
+export const NotificationsList = () => {
+  const notifications = useSelector(selectAllNotifications)
+  const users = useSelector(selectAllUsers)
+
+  const renderedNotifications = notifications.map(notification => {
+    const date = parseISO(notification.date)
+    const timeAgo = formatDistanceToNow(date)
+    const user = users.find(user => user.id === notification.user) || {
+      name: 'Unknown User'
+    }
+
+    return (
+      <div key={notification.id} className="notification">
+        <div>
+          <b>{user.name}</b> {notification.message}
+        </div>
+        <div title={notification.date}>
+          <i>{timeAgo} ago</i>
+        </div>
+      </div>
+    )
+  })
+
+  return (
+    <section className="notificationsList">
+      <h2>Notifications</h2>
+      {renderedNotifications}
+    </section>
+  )
+}
+```
+
+Once again, we're reading a list of items from the Redux state, mapping over them, and rendering content for each item.
+
+We also need to update the `<Navbar>` to add a "Notifications" tab, and a new button to fetch some notifications:
+
+```jsx title="app/Navbar.js"
+import React from 'react'
+// highlight-next-line
+import { useDispatch } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+// highlight-next-line
+import { fetchNotifications } from '../features/notifications/notificationsSlice'
+
+export const Navbar = () => {
+  // highlight-start
+  const dispatch = useDispatch()
+
+  const fetchNewNotifications = () => {
+    dispatch(fetchNotifications())
+  }
+  // highlight-end
+
+  return (
+    <nav>
+      <section>
+        <h1>Redux Essentials Example</h1>
+
+        <div className="navContent">
+          <div className="navLinks">
+            <Link to="/">Posts</Link>
+            <Link to="/users">Users</Link>
+            // highlight-next-line
+            <Link to="/notifications">Notifications</Link>
+          </div>
+          // highlight-start
+          <button className="button" onClick={fetchNewNotifications}>
+            Refresh Notifications
+          </button>
+          // highlight-end
+        </div>
+      </section>
+    </nav>
+  )
+}
+```
+
+Here's what the "Notifications" tab looks like so far:
+
+![Initial Notifications tab](/img/tutorials/essentials/notifications-initial.png)
+
+### Showing New Notifications
+
+Each time we click "Refresh Notifications", a few more notification entries will be added to our list. In a real app, those could be coming from the server while we're looking at other parts of the UI. We can do something similar by clicking "Refresh Notifications" while we're looking at the `<PostsList>` or `<UserPage>`. But, right now we have no idea how many notifications just arrived, and if we keep clicking the button, there could be many notifications we haven't read yet. Let's add some logic to keep track of which notifications have been read and which of them are "new". That will let us show the count of "Unread" notifications as a badge on our "Notifications" tab in the navbar, and display new notifications in a different color.
+
+Our fake API is already sending back the notification entries with `isNew` and `read` fields, so we can use those in our code.
+
+First, we'll update `notificationsSlice` to have a reducer that marks all notifications as read, and some logic to handle marking existing notifications as "not new":
+
+```js title="features/notifications/notificationsSlice.js"
+const notificationsSlice = createSlice({
+  name: 'notifications',
+  initialState: [],
+  reducers: {
+    // highlight-start
+    allNotificationsRead(state, action) {
+      state.forEach(notification => {
+        notification.read = true
+      })
+    }
+    // highlight-end
+  },
+  extraReducers: {
+    [fetchNotifications.fulfilled]: (state, action) => {
+      // highlight-start
+      state.forEach(notification => {
+        // Any notifications we've read are no longer new
+        notification.isNew = !notification.read
+      })
+      // highlight-end
+      state.push(...action.payload)
+      // Sort with newest last
+      state.sort((a, b) => b.date.localeCompare(a.date))
+    }
+  }
+})
+
+// highlight-next-line
+export const { allNotificationsRead } = notificationsSlice.actions
+
+export default notificationsSlice.reducer
+```
+
+We want to mark these notifications as read whenever our `<NotificationsList>` component renders, either because we clicked on the tab to view the notifications, or because we already have it open and we just received some additional notifications. We can do this by dispatching `allNotificationsRead` in a `useEffect` hook. We also want to add an additional classname to any notification list entries in the page, to highlight them:
+
+```js title="features/notifications/NotificationsList.js"
+import React, { useEffect } from 'react'
+// highlight-next-line
+import { useSelector, useDispatch } from 'react-redux'
+import { formatDistanceToNow, parseISO } from 'date-fns'
+// highlight-next-line
+import classnames from 'classnames'
+
+import { selectAllUsers } from '../users/usersSlice'
+
+// highlight-start
+import {
+  selectAllNotifications,
+  allNotificationsRead
+} from './notificationsSlice'
+// highlight-end
+
+export const NotificationsList = () => {
+  // highlight-next-line
+  const dispatch = useDispatch()
+  const notifications = useSelector(selectAllNotifications)
+  const users = useSelector(selectAllUsers)
+
+  // highlight-start
+  useEffect(() => {
+    dispatch(allNotificationsRead())
+  })
+  // highlight-end
+
+  const renderedNotifications = notifications.map(notification => {
+    const date = parseISO(notification.date)
+    const timeAgo = formatDistanceToNow(date)
+    const user = users.find(user => user.id === notification.user) || {
+      name: 'Unknown User'
+    }
+
+    // highlight-start
+    const notificationClassname = classnames('notification', {
+      new: notification.isNew
+    })
+
+    return (
+      <div key={notification.id} className={notificationClassname}>
+        // highlight-end
+        <div>
+          <b>{user.name}</b> {notification.message}
+        </div>
+        <div title={notification.date}>
+          <i>{timeAgo} ago</i>
+        </div>
+      </div>
+    )
+  })
+
+  return (
+    <section className="notificationsList">
+      <h2>Notifications</h2>
+      {renderedNotifications}
+    </section>
+  )
+}
+```
+
+This works, but actually has a slightly surprising bit of behavior. Any time there are new notifications (either because we've just switched to this tab, or we've fetched some new notifications from the API), you'll actually see _two_ `"notifications/allNotificationsRead"` actions dispatched. Why is that?
+
+Let's say we have fetched some notifications while looking at the `<PostsList>`, and then click the "Notifications" tab. The `<NotificationsList>` component will mount, and the `useEffect` callback will run after that first render and dispatch `allNotificationsRead`. Our `notificationsSlice` will handle that by updating the notification entries in the store. This creates a new `state.notifications` array containing the immutably-updated entries, which forces our component to render again because it sees a new array returned from the `useSelector`, and the `useEffect` hook runs again and dispatches `allNotificationsRead` a second time. The reducer runs again, but this time no data changes, so the component doesn't re-render.
+
+There's a couple ways we could potentially avoid that second dispatch, like splitting the logic to dispatch once when the component mounts, and only dispatch again if the size of the notifications array changes. But, this isn't actually hurting anything, so we can leave it alone.
+
+This does actually show that **it's possible to dispatch an action and not have _any_ state changes happen at all**. Remember, **it's always up to your reducers to decide _if_ any state actually needs to be updated, and "nothing needs to happen" is a valid decision for a reducer to make**.
+
+Here's how the notifications tab looks now that we've got the "new/read" behavior working:
+
+![New notifications](/img/tutorials/essentials/notifications-new.png)
+
+## Improving Render Performance
+
+Our application is looking useful, but we've actually got a couple flaws in when and how our components re-render. Let's look at those problems, and talk about some ways to improve the performance.
+
+### Investigating Render Behavior
+
+We can use the React DevTools Profiler to view some graphs of what components re-render when state is updated. Try clicking over to the `<UserPage>` for a single user. Open up your browser's DevTools, and in the React "Profiler" tab, click the circle "Record" button in the upper-left. Then, click the "Refresh Notifications" button in our app, and stop the recording in the React DevTools Profiler. You should see a chart that looks like this:
+
+![React DevTools Profiler render capture - <UserPage>](/img/tutorials/essentials/userpage-rerender.png)
+
+We can see that the `<Navbar>` re-rendered, which makes sense because it had to show the updated "unread notifications" badge in the tab. But, why did our `<UserPage>` re-render?
+
+If we inspect the last couple dispatched actions in the Redux DevTools, we can see that only the notifications state updated. Since the `<UserPage>` doesn't read any notifications, it shouldn't have re-rendered. Something must be wrong with the component.
+
+If we look at `<UserPage>` carefully, there's a specific problem:
+
+```jsx title="features/UserPage.js
+export const UserPage = ({ match }) => {
+  const { userId } = match.params
+
+  const user = useSelector(state => selectUserById(state, userId))
+
+  // highlight-start
+  const postsForUser = useSelector(state => {
+    const allPosts = selectAllPosts(state)
+    return allPosts.filter(post => post.user === userId)
+  })
+  // highlight-end
+
+  // omit rendering logic
+}
+```
+
+We know that `useSelector` will re-run every time an action is dispatched, and that it force the component to re-render if we return a new reference value.
+
+We're calling `filter()` inside of our `useSelector` hook, so that we only return the list of posts that belong to this user. Unfortunately, **this means that `useSelector` _always_ returns a new array reference, and so our component will re-render after _every_ action even if the posts data hasn't changed!**.
+
+### Memoizing Selector Functions
+
+What we really need is a way to only calculate the new filtered array if either `state.posts` or `userId` have changed. If they _haven't_ changed, we want to return the same filtered array reference as the last time.
+
+This idea is called "memoization". We want to save a previous set of inputs and the calculated result, and if the inputs are the same, return the previous result instead of recalculating it again.
+
+So far, we've been writing selector functions by ourselves, and just so that we don't have to copy and paste the code for reading data from the store. It would be great if there was a way to make our selector functions memoized.
+
+**[Reselect](https://github.com/reduxjs/reselect) is a library for creating memoized selector functions**, and was specifically designed to be used with Redux. It has a `createSelector` function that generates memoized selectors that will only recalculate results when the inputs change. Redux Toolkit [exports the `createSelector` function](https://redux-toolkit.js.org/api/createSelector), so we already have it available.
+
+Let's make a new `selectPostsByUser` selector function, using Reselect, and use it here.
+
+```js title="features/posts/postsSlice.js"
+// highlight-next-line
+import { createSlice, createAsyncThunk, createSelector } from '@reduxjs/toolkit'
+
+// omit slice logic
+
+export const selectAllPosts = state => state.posts.posts
+
+export const selectPostById = (state, postId) =>
+  state.posts.posts.find(post => post.id === postId)
+
+// highlight-start
+export const selectPostsByUser = createSelector(
+  [selectAllPosts, (state, userId) => userId],
+  (posts, userId) => posts.filter(post => post.user === userId)
+)
+// highlight-end
+```
+
+`createSelector` takes one or more "input selector" functions as argument, plus an "output selector" function. When we call `selectPostsByUser(state, userId)`, `createSelector` will pass all of the arguments into each of our input selectors. Whatever those input selectors return becomes the arguments for the output selector.
+
+In this case, we know that we need the array of all posts and the user ID as the two arguments for our output selector. We can reuse our existing `selectAllPosts` selector to extract the posts array. Since the user ID is the second argument we're passing into `selectPostsByUser`, we can write a small selector that just returns `userId`.
+
+Our output selector then takes `posts` and `userId`, and returns the filtered array of posts for just that user.
+
+If we try calling `selectPostsByUser` multiple times, it will only re-run the output selector if either `posts` or `userId` has changed:
+
+```js
+const state1 = getState()
+// Output selector runs, because it's the first call
+selectPostsByUser(state1, 'user1')
+// Output selector does _not_ run, because the arguments haven't changed
+selectPostsByUser(state1, 'user1')
+// Output selector runs, because `userId` changed
+selectPostsByUser(state1, 'user2')
+
+dispatch(reactionAdded())
+const state2 = getState()
+// Output selector does not run, because `posts` and `userId` are the same
+selectPostsByUser(state2, 'user2')
+
+// Add some more posts
+dispatch(addNewPost())
+const state3 = getState()
+// Output selector runs, because `posts` has changed
+selectPostsByUser(state3, 'user2')
+```
+
+If we call this selector in `<UserPage>` and re-run the React profiler while fetching notifications, we should see that `<UserPage>` doesn't re-render this time:
+
+```jsx
+export const UserPage = ({ match }) => {
+  const { userId } = match.params
+
+  const user = useSelector(state => selectUserById(state, userId))
+
+  // highlight-start
+  const postsForUser = useSelector(state => selectPostsByUser(state, userId))
+  // highlight-end
+
+  // omit rendering logic
+}
+```
+
+Memoized selectors are a valuable tool for improving performance in a React+Redux application, because they can help us avoid unnecessary re-renders, and also avoid doing potentially complex or expensive calculations if the input data hasn't changed.
+
+### Investigating the Posts List
+
+If we go back to our `<PostsList>` and try clicking a reaction button on one of the posts while capturing a React profiler trace, we'll see that not only did the `<PostsList>` and the updated `<PostExcerpt>` instance render, _all_ of the `<PostExcerpt>` components rendered:
+
+![React DevTools Profiler render capture - <PostsList>](/img/tutorials/essentials/postslist-rerender.png)
+
+Why is that? None of the other posts changed, so why would they need to re-render?
+
+[**React's default behavior is that when a parent component renders, React will recursively render all child components inside of it!**](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/). The immutable update of one post object also created a new `posts` array. Our `<PostsList>` had to re-render because the `posts` array was a new reference, so after it rendered, React continued downwards and re-rendered all of the `<PostExcerpt>` components too.
+
+This isn't a serious problem for our small example app, but in a larger real-world app, we might have some very long lists or very large component trees, and having all those extra components re-render might slow things down.
+
+There's a few different ways we could optimize this behavior in `<PostsList>`.
+
+First, we could wrap the `<PostExcerpt>` component in [`React.memo()`](https://reactjs.org/docs/react-api.html#reactmemo), which will ensure that the component inside of it only re-renders if the props have actually changed. This will actually work quite well - try it out and see what happens:
+
+```jsx title="features/posts/PostsList.js
+// highlight-next-line
+let PostExcerpt = ({ post }) => {
+  // omit logic
+}
+
+// highlight-next-line
+PostExcerpt = React.memo(PostExcerpt)
+```
+
+Another option is to rewrite `<PostsList>` so that it only selects a list of post IDs from the store instead of the entire `posts` array, and rewrite `<PostExcerpt>` so that it receives a `postId` prop and calls `useSelector` to read the post object it needs. If `<PostsList>` gets the same list of IDs as before, it won't need to re-render, and so only our one changed `<PostExcerpt>` component should have to render.
+
+Unfortunately, this gets tricky because we also need to have all our posts sorted by date and rendered in the right order. We could update our `postsSlice` to keep the array sorted at all times, so we don't have to sort it in the component, and use a memoized selector to extract just the list of post IDs. We could also [customize the comparison function that `useSelector` runs to check the results](https://react-redux.js.org/api/hooks#equality-comparisons-and-updates), like `useSelector(selectPostIds, shallowEqual)`, so that will skip re-rendering if the _contents_ of the IDs array haven't changed.
+
+The last option is to find some way to have our reducer keep a separate array of IDs for all the posts, and only modify that array when posts are added or removed, and do the same rewrite of `<PostsList>` and `<PostExcerpt>`. This way, `<PostsList>` only needs to re-render when that IDs array changes.
+
+Conveniently, Redux Toolkit has a `createEntityAdapter` function that will help us do just that.
+
+## Normalizing Data
+
+You've seen that a lot of our logic has been looking up items by their ID field. Since we've been storing our data in arrays, that means we have to loop over all the items in the array using `array.find()` until we find the item with the ID we're looking for.
+
+Realistically, this doesn't take very long, but if we had arrays with hundreds or thousands of items inside, looking through the entire array to find one item becomes wasted effort. What we need is a way to look up a single item based on its ID, directly, without having to check all the other items. This process is known as "normalization".
+
+### Normalized State Structure
+
+"Normalized state" means that:
+
+- We only have one copy of each particular piece of data in our state, so there's no duplication
+- Data that has been normalized is kept in a lookup table, where the item IDs are the keys, and the items themselves are the values.
+- There may also be an array of all of the IDs for a particular item type
+
+JavaScript objects can be used as lookup tables, similar to "maps" or "dictionaries" in other languages. Here's what the normalized state for a group of `user` objects might look like:
+
+```js
+{
+  users: {
+    ids: ["user1", "user2", "user3"],
+    entities: {
+      "user1": {id: "user1", firstName, lastName},
+      "user2": {id: "user2", firstName, lastName},
+      "user3": {id: "user3", firstName, lastName},
+    }
+  }
+}
+```
+
+This makes it easy to find a particular `user` object by its ID, without having to loop through all the other user objects in an array:
+
+```js
+const userId = 'user2'
+const userObject = state.users.entities[userId]
+```
+
+:::info
+
+For more details on why normalizing state is useful, see [Normalizing State Shape](../../recipes/structuring-reducers/NormalizingStateShape.md) and the Redux Toolkit Usage Guide section on [Managing Normalized Data](https://redux-toolkit.js.org/usage/usage-guide#managing-normalized-data).
+
+:::
+
+### Managing Normalized State with `createEntityAdapter`
+
+Redux Toolkit's `createEntityAdapter` API provides a standardized way to store your data in a slice by taking a collection of items and putting them into the shape of `{ ids: [], entities: {} }`. Along with this predefined state shape, it generates a set of reducer functions and selectors that know how to work with that data.
+
+This has several benefits:
+
+- We don't have to write the code to manage the normalization ourselves
+- `createEntityAdapter`'s pre-built reducer functions handle common cases like "add all these items", "update one item", or "remove multiple items"
+- `createEntityAdapter` can keep the ID array in a sorted order based on the contents of the items, and will only update that array if items are added / removed or the sorting order changes.
+
+`createEntityAdapter` accepts an options object that may include a `sortComparer` function, which will be used to keep the item IDs array in sorted order by comparing two items (and works the same way as `Array.sort()`).
+
+It returns an object that contains [a set of generated reducer functions for adding, updating, and removing items from an entity state object](https://redux-toolkit.js.org/api/createEntityAdapter#crud-functions). These reducer functions can either be used as a case reducer for a specific action type, or as a "mutating" utility function within another reducer in `createSlice`.
+
+The adapter object also has a `getSelectors` function. You can pass in a selector that returns this particular slice of state from the Redux root state, and it will generate selectors like `selectAll` and `selectById`.
+
+Finally, the adapter object has a `getInitialState` function that generates an empty `{ids: [], entities: {}}` object. You can pass in more fields to `getInitialState`, and those will be merged in.
+
+### Updating the Posts Slice
+
+With that in mind, let's update our `postsSlice` to use `createEntityAdapter`:
+
+```js title="features/posts/postsSlice.js"
+import {
+  // highlight-next-line
+  createEntityAdapter
+  // omit other imports
+} from '@reduxjs/toolkit'
+
+// highlight-start
+const postsAdapter = createEntityAdapter({
+  sortComparer: (a, b) => b.date.localeCompare(a.date)
+})
+
+const initialState = postsAdapter.getInitialState({
+  status: 'idle',
+  error: null
+})
+// highlight-end
+
+// omit thunks
+
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {
+    reactionAdded(state, action) {
+      const { postId, reaction } = action.payload
+      // highlight-next-line
+      const existingPost = state.entities[postId]
+      if (existingPost) {
+        existingPost.reactions[reaction]++
+      }
+    },
+    postUpdated(state, action) {
+      const { id, title, content } = action.payload
+      // highlight-next-line
+      const existingPost = state.entities[id]
+      if (existingPost) {
+        existingPost.title = title
+        existingPost.content = content
+      }
+    }
+  },
+  extraReducers: {
+    // omit other reducers
+
+    [fetchPosts.fulfilled]: (state, action) => {
+      state.status = 'succeeded'
+      // Add any fetched posts to the array
+      // highlight-start
+      // Use the `upsertMany` reducer as a mutating update utility
+      postsAdapter.upsertMany(state, action.payload)
+      // highlight-end
+    },
+    // highlight-start
+    // Use the `addOne` reducer for the fulfilled case
+    [addNewPost.fulfilled]: postsAdapter.addOne
+    // highlight-end
+  }
+})
+
+export const { postAdded, postUpdated, reactionAdded } = postsSlice.actions
+
+export default postsSlice.reducer
+
+// highlight-start
+// Export the customized selectors for this adapter using `getSelectors`
+export const {
+  selectAll: selectAllPosts,
+  selectById: selectPostById,
+  selectIds: selectPostIds
+  // Pass in a selector that returns the posts slice of state
+} = postsAdapter.getSelectors(state => state.posts)
+// highlight-end
+
+export const selectPostsByUser = createSelector(
+  [selectAllPosts, (state, userId) => userId],
+  (posts, userId) => posts.filter(post => post.user === userId)
+)
+```
+
+There's a lot going on there! Let's break it down.
+
+First, we import `createEntityAdapter`, and call it to create our `postsAdapter` object. We know that we want to keep an array of all post IDs sorted with the newest post first, so we pass in a `sortComparer` function that will sort newer items to the front based on the `post.date` field.
+
+`getInitialState()` returns an empty `{ids: [], entities: {}}` normalized state object. Our `postsSlice` needs to keep the `status` and `error` fields for loading state too, so we pass those in to `getInitialState()`.
+
+Now that our posts are being kept as a lookup table in `state.entities`, we can change our `reactionAdded` and `postUpdated` reducers to directly look up the right posts by their IDs, instead of having to loop over the old `posts` array.
+
+When we receive the `fetchPosts.fulfilled` action, we can use the `postsAdapter.upsertMany` function to add all of the incoming posts to the state, by passing in the draft `state` and the array of posts in `action.payload`. If there's any items in `action.payload` that already existing in our state, the `upsertMany` function will merge them together based on matching IDs.
+
+When we receive the `addNewPost.fulfilled` action, we know we need to add that one new post object to our state. We can use the adapter functions as reducers directly, so we'll pass `postsAdapter.addOne` as the reducer function to use to handle that action.
+
+Finally, we can replace the old hand-written `selectAllPosts` and `selectPostById` selector functions with the ones generated by `postsAdapter.getSelectors`. Since the selectors are called with the root Redux state object, they need to know where to find our posts data in the Redux state, so we pass in a small selector that returns `state.posts`. The generated selector functions are always called `selectAll` and `selectById`, so we can use ES6 destructuring syntax to rename them as we export them and match the old selector names. We'll also export `selectPostIds` the same way, since we want to read the list of sorted post IDs in our `<PostsList>` component.
+
+### Optimizing the Posts List
+
+Now that our posts slice is using `createEntityAdapter`, we can update `<PostsList>` to optimize its rendering behavior.
+
+We'll update `<PostsList>` to read just the sorted array of post IDs, and pass `postId` to each `<PostExcerpt>`:
+
+```jsx title="features/posts/PostsList.js"
+// omit other imports
+
+// highlight-start
+import {
+  selectAllPosts,
+  fetchPosts,
+  selectPostIds,
+  selectPostById
+} from './postsSlice'
+
+let PostExcerpt = ({ postId }) => {
+  const post = useSelector(state => selectPostById(state, postId))
+  // highlight-end
+  // omit rendering logic
+}
+
+export const PostsList = () => {
+  const dispatch = useDispatch()
+  // highlight-next-line
+  const orderedPostIds = useSelector(selectPostIds)
+
+  // omit other selections and effects
+
+  if (postStatus === 'loading') {
+    content = <div className="loader">Loading...</div>
+  } else if (postStatus === 'succeeded') {
+    // highlight-start
+    content = orderedPostIds.map(postId => (
+      <PostExcerpt key={postId} postId={postId} />
+    ))
+    // highlight-end
+  } else if (postStatus === 'error') {
+    content = <div>{error}</div>
+  }
+
+  // omit other rendering
+}
+```
+
+Now, if we try clicking a reaction button on one of the posts while capturing a React component performance profile, we should see that _only_ that one component re-rendered:
+
+![React DevTools Profiler render capture - optimized <PostsList>](/img/tutorials/essentials/postslist-optimized.png)
+
+## Converting Other Slices
+
+We're almost done. As a final cleanup step, we'll update our other two slices to use `createEntityAdapter` as well.
+
+### Converting the Users Slice
+
+The `usersSlice` is fairly small, so we've only got a few things to change:
+
+```js title="features/users/usersSlice.js"
+import {
+  createSlice,
+  createAsyncThunk,
+  // highlight-next-line
+  createEntityAdapter
+} from '@reduxjs/toolkit'
+import { client } from '../../api/client'
+
+// highlight-start
+const usersAdapter = createEntityAdapter()
+
+const initialState = usersAdapter.getInitialState()
+// highlight-end
+
+export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
+  const response = await client.get('/fakeApi/users')
+  return response.users
+})
+
+const usersSlice = createSlice({
+  name: 'users',
+  initialState,
+  reducers: {},
+  extraReducers: {
+    // highlight-next-line
+    [fetchUsers.fulfilled]: usersAdapter.setAll
+  }
+})
+
+export default usersSlice.reducer
+
+// highlight-start
+export const {
+  selectAll: selectAllUsers,
+  selectById: selectUserById
+} = usersAdapter.getSelectors(state => state.users)
+// highlight-end
+```
+
+The only action we're handling here always replaces the entire list of users with the array we fetched from the server. We can use `usersAdapter.setAll` to implement that instead.
+
+Our `<AddPostForm>` is still trying to read `state.users` as an array, as is `<PostAuthor>`. Update them to use `selectAllUsers` and `selectUserById`, respectively.
+
+### Converting the Notifications Slice
+
+Last but not least, we'll update `notificationsSlice` as well:
+
+```js title="features/notifications/notificationsSlice.js"
+import {
+  createSlice,
+  createAsyncThunk,
+  // highlight-next-line
+  createEntityAdapter
+} from '@reduxjs/toolkit'
+
+import { client } from '../../api/client'
+
+// highlight-start
+const notificationsAdapter = createEntityAdapter({
+  sortComparer: (a, b) => b.date.localeCompare(a.date)
+})
+// highlight-end
+
+// omit fetchNotifications thunk
+
+const notificationsSlice = createSlice({
+  name: 'notifications',
+  // highlight-next-line
+  initialState: notificationsAdapter.getInitialState(),
+  reducers: {
+    allNotificationsRead(state, action) {
+      // highlight-start
+      Object.values(state.entities).forEach(notification => {
+        notification.read = true
+      })
+      // highlight-end
+    }
+  },
+  extraReducers: {
+    [fetchNotifications.fulfilled]: (state, action) => {
+      // highlight-start
+      Object.values(state.entities).forEach(notification => {
+        // Any notifications we've read are no longer new
+        notification.isNew = !notification.read
+      })
+      notificationsAdapter.upsertMany(state, action.payload)
+      // highlight-end
+    }
+  }
+})
+
+export const { allNotificationsRead } = notificationsSlice.actions
+
+export default notificationsSlice.reducer
+
+// highlight-start
+export const {
+  selectAll: selectAllNotifications
+} = notificationsAdapter.getSelectors(state => state.notifications)
+// highlight-end
+```
+
+We again import `createEntityAdapter`, call it, and call `notificationsAdapter.getInitialState()` to help set up the slice.
+
+Ironically, we do have a couple places in here where we need to loop over all notification objects and update them. Since those are no longer being kept in an array, we have to use `Object.values(state.entities)` to get an array of those notifications and loop over that. On the other hand, we can replace the previous fetch update logic with `notificationsAdapter.upsertMany`.
+
+And with that... we're done!
+
+## What You've Learned
+
+Congratulations, you've completed the Redux Essentials tutorial! Let's see what the final app looks like in action:
+
+<iframe
+  class="codesandbox"
+  src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-example-app/tree/checkpoint-4-entitySlices/?fontsize=14&hidenavigation=1&theme=dark"
+  title="redux-essentials-example-app"
+  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+></iframe>
+
+Here's what we covered in this section:
+
+:::tip
+
+- **Memoized selector functions can be used to optimize performance**
+  - Redux Toolkit re-exports the `createSelector` function from Reselect, which generates memoized selectors
+  - Memoized selectors will only recalculate the results if the input selectors return new values
+  - Memoization can skip expensive calculations, and ensure the same result references are returned
+- **There are multiple patterns you can use to optimize React component rendering with Redux**
+  - Avoid creating new object/array references inside of `useSelector` - those will cause unnecessary re-renders
+  - Memoized selector functions can be passed to `useSelector` to optimize rendering
+  - `useSelector` can accept an alternate comparison function like `shallowEqual` instead of reference equality
+  - Components can be wrapped in `React.memo()` to only re-render if their props change
+  - List rendering can be optimized by having list parent components read just an array of item IDs, passing the IDs to list item children, and retrieving items by ID in the children
+- **Normalized state structure is a recommended approach for storing items**
+  - "Normalization" means no duplication of data, and keeping items stored in a lookup table by item ID
+  - Normalized state shape usually looks like `{ids: [], entities: {}}`
+- **Redux Toolkit's `createEntityAdapter` API helps manage normalized data in a slice**
+  - Item IDs can be kept in sorted order by passing in a `sortComparer` option
+  - The adapter object includes:
+    - `adapter.getInitialState`, which can accept additional state fields like loading state
+    - Prebuilt reducers for common cases, like `setAll`, `addMany`, `upsertOne`, and `removeMany`
+    - `adapter.getSelectors`, which generates selectors like `selectAll` and `selectById`
+
+:::
+
+## What's Next?
+
+The concepts we've covered in this tutorial should be enough to get you started building your own applications using React and Redux. Now's a great time to try working on a project yourself to solidify these concepts and see how they work in practice. If you're not sure what kind of a project to build, see [this list of app project ideas](https://github.com/florinpop17/app-ideas) for some inspiration.
+
+The Redux Essentials tutorial focused on "how to use Redux correctly", rather than "how it works" or "why it works this way". In particular, Redux Toolkit is a higher-level set of abstractions and utilities, and it's helpful to understand what the abstractions in RTK are actually doing for you. Reading through the [Basic Tutorial](../../basics/README.md) and [Advanced Tutorial](../../advanced/README.md) will help you understand how to write Redux code "by hand", and why we recommend Redux Toolkit as the default way to write Redux logic.
+
+:::info
+
+While the concepts in the "Basic" and "Advanced" tutorials are still valid, those pages are some of the oldest parts of our docs. We'll be updating those tutorials soon to improve the explanations and show some patterns that are simpler and easier to use. Keep an eye out for those updates. We'll also be reorganizing our docs to make it easier to find information.
+
+:::
+
+The [Recipes](../../recipes/README.md) section has information on a number of important concepts, like [how to structure your reducers](../../recipes/structuring-reducers/StructuringReducers.md), and [our Style Guide page](../../style-guide/style-guide) has important information on our recommended patterns and best practices.
+
+If you'd like to know more about _why_ Redux exists, what problems it tries to solve, and how it's meant to be used, see Redux maintainer Mark Erikson's posts on [The Tao of Redux, Part 1: Implementation and Intent](https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/) and [The Tao of Redux, Part 2: Practice and Philosophy](https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/).
+
+If you're looking for help with Redux questions, come join [the `#redux` channel in the Reactiflux server on Discord](https://www.reactiflux.com).
+
+**Thanks for reading through this tutorial, and we hope you enjoy building applications with Redux!**
diff --git a/docs/tutorials/tutorials-index.md b/docs/tutorials/tutorials-index.md
new file mode 100644
index 0000000000..77fb0aaa36
--- /dev/null
+++ b/docs/tutorials/tutorials-index.md
@@ -0,0 +1,27 @@
+---
+id: tutorials-index
+slug: index
+title: 'Redux Tutorials Index'
+sidebar_label: 'Tutorials Index'
+hide_title: true
+description: 'Overview of the Redux tutorial pages'
+---
+
+# Redux Tutorials Index
+
+We have two different sets of tutorials:
+
+- The [**Redux Essentials tutorial**](./essentials/part-1-overview-concepts) is a "top-down" tutorial that teaches how to use Redux the right way, using our latest recommended APIs and best practices.
+- The [**Basic tutorial**](../basics/README.md) and [**Advanced tutorial**](../advanced/README.md) are a "bottom-up" tutorial that teaches how Redux works, starting from first principles.
+
+:::tip
+
+**We recommend starting with the [Redux Essentials tutorial](./essentials/part-1-overview-concepts)**, since it covers the key points you need to know about how to get started using Redux to write actual applications.
+
+:::
+
+:::info
+
+While the concepts in the "Basic" and "Advanced" tutorials are still valid, those pages are some of the oldest parts of our docs. We'll be updating those tutorials soon to improve the explanations and show some patterns that are simpler and easier to use. Keep an eye out for those updates. We'll also be reorganizing our docs to make it easier to find information.
+
+:::
diff --git a/netlify.toml b/netlify.toml
index 6d97e822c4..e45965bf84 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,4 +1,4 @@
 [build]
   base    = "website"
   publish = "website/build"
-  command = "npm run build"
+  command = "npm run build && cp _redirects ./build"
diff --git a/website/_redirects b/website/_redirects
index 264d61e663..52175f9b30 100644
--- a/website/_redirects
+++ b/website/_redirects
@@ -141,4 +141,7 @@
 /recipes/ServerRendering.html*        /recipes/server-rendering:splat
 /advanced/usagewithtypescript*    /recipes/usage-with-typescript:splat
 
-/feedback        /introduction/getting-started#help-and-discussion
\ No newline at end of file
+/feedback        /introduction/getting-started#help-and-discussion
+
+# PR preview for the new tutorial
+/tutorials/quick-start/quick-start-part-1        /tutorials/essentials/part-1-overview-concepts
\ No newline at end of file
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index c483a00546..5f8820176e 100755
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -24,6 +24,11 @@ module.exports = {
           to: 'introduction/getting-started',
           position: 'right'
         },
+        {
+          label: 'Tutorial',
+          to: 'tutorials/essentials/part-1-overview-concepts',
+          position: 'right'
+        },
         { label: 'API', to: 'api/api-reference', position: 'right' },
         { label: 'FAQ', to: 'faq', position: 'right' },
         {
@@ -48,6 +53,10 @@ module.exports = {
               label: 'Getting Started',
               to: 'introduction/getting-started'
             },
+            {
+              label: 'Tutorial',
+              to: 'tutorials/essentials/part-1-overview-concepts'
+            },
             {
               label: 'FAQ',
               to: 'faq'
diff --git a/website/sidebars.js b/website/sidebars.js
index f08ecb0b8d..171dc4fb21 100755
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -11,23 +11,46 @@ module.exports = {
       'introduction/ecosystem',
       'introduction/examples'
     ],
-    'Basic Tutorial': [
-      'basics/basic-tutorial',
-      'basics/actions',
-      'basics/reducers',
-      'basics/store',
-      'basics/data-flow',
-      'basics/usage-with-react',
-      'basics/example'
-    ],
-    'Advanced Tutorial': [
-      'advanced/advanced-tutorial',
-      'advanced/async-actions',
-      'advanced/async-flow',
-      'advanced/middleware',
-      'advanced/usage-with-react-router',
-      'advanced/example-reddit-api',
-      'advanced/next-steps'
+    Tutorials: [
+      'tutorials/tutorials-index',
+      {
+        type: 'category',
+        label: 'Redux Essentials',
+        items: [
+          'tutorials/essentials/part-1-overview-concepts',
+          'tutorials/essentials/part-2-app-structure',
+          'tutorials/essentials/part-3-data-flow',
+          'tutorials/essentials/part-4-using-data',
+          'tutorials/essentials/part-5-async-logic',
+          'tutorials/essentials/part-6-performance-normalization'
+        ]
+      },
+      {
+        type: 'category',
+        label: 'Basic Tutorial',
+        items: [
+          'basics/basic-tutorial',
+          'basics/actions',
+          'basics/reducers',
+          'basics/store',
+          'basics/data-flow',
+          'basics/usage-with-react',
+          'basics/example'
+        ]
+      },
+      {
+        type: 'category',
+        label: 'Advanced Tutorial',
+        items: [
+          'advanced/advanced-tutorial',
+          'advanced/async-actions',
+          'advanced/async-flow',
+          'advanced/middleware',
+          'advanced/usage-with-react-router',
+          'advanced/example-reddit-api',
+          'advanced/next-steps'
+        ]
+      }
     ],
     Recipes: [
       'recipes/recipe-index',
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index f55a3b29c7..52d1a5e8aa 100755
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -1,3 +1,9 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+/* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #764abc;
   --ifm-color-primary-dark: #6a43a9;
@@ -8,11 +14,43 @@
   --ifm-color-primary-lightest: #9f80d0;
 
   --ifm-code-font-size: 95%;
+  --ifm-code-border-radius: 3px;
+  --ifm-code-background: rgba(27, 31, 35, 0.05);
   --ifm-blockquote-color: #ecf4f9;
   --ifm-blockquote-color-dark: #cbddea;
 
   --ifm-code-padding-vertical: 0.1rem;
   --ifm-code-padding-horizontal: 0.2rem;
+  --ifm-pre-background: rgb(39, 40, 34);
+
+  --ifm-alert-color: black;
+
+  --ra-admonition-color: #ecf4f9;
+  --ra-admonition-color-dark: #2a98b9;
+
+  --ra-admonition-color-important: #2a98b9;
+
+  --ra-admonition-color-success: #f1fdf9;
+  --ra-admonition-color-success-dark: #00bf88;
+
+  --ra-admonition-color-caution: #fffbf5;
+  --ra-admonition-color-caution-dark: #f0ad4e;
+
+  --ra-admonition-color-error: #fff2f2;
+  --ra-admonition-color-error-dark: #d9534f;
+
+  --ra-admonition-icon-color: black !important;
+}
+
+@media screen and (max-width: 996px) {
+  :root {
+    --ifm-font-size-base: 15px;
+  }
+}
+@media screen and (min-width: 997px) {
+  :root {
+    --ifm-font-size-base: 17px;
+  }
 }
 
 :root[data-theme='dark'] {
@@ -40,19 +78,44 @@ blockquote {
   border-radius: var(--ifm-global-radius);
 }
 
+.docusaurus-highlight-code-line {
+  background-color: rgb(72, 77, 91);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: calc(-0.25em + var(--ifm-pre-padding));
+  padding-right: var(--ifm-pre-padding);
+  border-left: 0.25em solid #1976d2;
+}
+
+div[class*='codeBlockTitle'] {
+  padding: 0.15rem var(--ifm-pre-padding);
+}
+
 code {
   background-color: var(--ifm-color-emphasis-300);
   border-radius: 0.2rem;
 }
 
-:root[data-theme='dark'] code {
-  background-color: rgb(39, 40, 34);
+a code {
+  color: inherit;
 }
 
-a code {
+a.contents__link > code {
   color: inherit;
 }
 
+a.contents__link.contents__link--active {
+  font-weight: 600;
+}
+
+a:visited {
+  color: var(--ifm-color-primary);
+}
+
+
+
 .navbar .navbar__items {
   flex: 1 1 auto;
 }
@@ -95,24 +158,28 @@ a code {
   overflow: hidden;
 }
 
-.style-guide details {
+.style-guide details,
+details.detailed-explanation {
   background-color: var(--ifm-blockquote-color);
-  margin: 1rem 0;
-  padding: 1rem;
+  margin: 0.25rem 0;
+  padding: 0.5rem 0.5rem;
   border-radius: var(--ifm-global-radius);
 }
 
-.style-guide details summary {
+.style-guide details summary,
+details.detailed-explanation summary {
   cursor: pointer;
 }
 
-.style-guide details summary h4 {
+.style-guide details summary h4,
+details.detailed-explanation summary h4 {
   display: inline-block;
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.style-guide details p {
+.style-guide details p,
+details.detailed-explanation p {
   margin-bottom: 0;
 }
 
@@ -136,3 +203,39 @@ a code {
   content: ' RECOMMENDED';
   color: var(--ifm-color-info);
 }
+
+.admonition {
+  color: var(--ifm-font-base-color);
+  border-radius: var(--ifm-global-radius);
+  border-left: 6px solid var(--ra-admonition-color-dark);
+}
+
+.admonition.admonition-note,
+.admonition.admonition-info,
+.admonition.admonition-important,
+.admonition.admonition-secondary {
+  --ra-admonition-color: #ecf4f9;
+  background-color: var(--ra-admonition-color);
+}
+
+.admonition.admonition-success,
+.admonition.admonition-tip {
+  background-color: var(--ra-admonition-color-success);
+  border-left-color: var(--ra-admonition-color-success-dark);
+}
+
+.admonition.admonition-caution {
+  background-color: var(--ra-admonition-color-caution);
+  border-left-color: var(--ra-admonition-color-caution-dark);
+}
+
+.admonition.admonition-warning,
+.admonition.admonition-danger {
+  background-color: var(--ra-admonition-color-error);
+  border-left-color: var(--ra-admonition-color-error-dark);
+}
+
+.admonition .admonition-icon svg {
+  fill: black;
+  stroke: black;
+}
diff --git a/website/static/img/tutorials/essentials/ReduxDataFlowDiagram.gif b/website/static/img/tutorials/essentials/ReduxDataFlowDiagram.gif
new file mode 100644
index 0000000000..1960d04496
Binary files /dev/null and b/website/static/img/tutorials/essentials/ReduxDataFlowDiagram.gif differ
diff --git a/website/static/img/tutorials/essentials/devtools-done-clicking.png b/website/static/img/tutorials/essentials/devtools-done-clicking.png
new file mode 100644
index 0000000000..5e5d405f70
Binary files /dev/null and b/website/static/img/tutorials/essentials/devtools-done-clicking.png differ
diff --git a/website/static/img/tutorials/essentials/devtools-first-action.png b/website/static/img/tutorials/essentials/devtools-first-action.png
new file mode 100644
index 0000000000..7be869667b
Binary files /dev/null and b/website/static/img/tutorials/essentials/devtools-first-action.png differ
diff --git a/website/static/img/tutorials/essentials/devtools-initial.png b/website/static/img/tutorials/essentials/devtools-initial.png
new file mode 100644
index 0000000000..088138480a
Binary files /dev/null and b/website/static/img/tutorials/essentials/devtools-initial.png differ
diff --git a/website/static/img/tutorials/essentials/devtools-posts-fulfilled.png b/website/static/img/tutorials/essentials/devtools-posts-fulfilled.png
new file mode 100644
index 0000000000..e75c221535
Binary files /dev/null and b/website/static/img/tutorials/essentials/devtools-posts-fulfilled.png differ
diff --git a/website/static/img/tutorials/essentials/devtools-posts-pending.png b/website/static/img/tutorials/essentials/devtools-posts-pending.png
new file mode 100644
index 0000000000..bc33153345
Binary files /dev/null and b/website/static/img/tutorials/essentials/devtools-posts-pending.png differ
diff --git a/website/static/img/tutorials/essentials/example-initial-posts-list.png b/website/static/img/tutorials/essentials/example-initial-posts-list.png
new file mode 100644
index 0000000000..677efdff0f
Binary files /dev/null and b/website/static/img/tutorials/essentials/example-initial-posts-list.png differ
diff --git a/website/static/img/tutorials/essentials/example-initial-posts.png b/website/static/img/tutorials/essentials/example-initial-posts.png
new file mode 100644
index 0000000000..72ca72046a
Binary files /dev/null and b/website/static/img/tutorials/essentials/example-initial-posts.png differ
diff --git a/website/static/img/tutorials/essentials/example-postAdded-action.png b/website/static/img/tutorials/essentials/example-postAdded-action.png
new file mode 100644
index 0000000000..124d54cff8
Binary files /dev/null and b/website/static/img/tutorials/essentials/example-postAdded-action.png differ
diff --git a/website/static/img/tutorials/essentials/notifications-initial.png b/website/static/img/tutorials/essentials/notifications-initial.png
new file mode 100644
index 0000000000..965bdb26a8
Binary files /dev/null and b/website/static/img/tutorials/essentials/notifications-initial.png differ
diff --git a/website/static/img/tutorials/essentials/notifications-new.png b/website/static/img/tutorials/essentials/notifications-new.png
new file mode 100644
index 0000000000..376e2e6f54
Binary files /dev/null and b/website/static/img/tutorials/essentials/notifications-new.png differ
diff --git a/website/static/img/tutorials/essentials/one-way-data-flow.png b/website/static/img/tutorials/essentials/one-way-data-flow.png
new file mode 100644
index 0000000000..8a18b59cfe
Binary files /dev/null and b/website/static/img/tutorials/essentials/one-way-data-flow.png differ
diff --git a/website/static/img/tutorials/essentials/posts-unknownAuthor.png b/website/static/img/tutorials/essentials/posts-unknownAuthor.png
new file mode 100644
index 0000000000..d4701ae8cc
Binary files /dev/null and b/website/static/img/tutorials/essentials/posts-unknownAuthor.png differ
diff --git a/website/static/img/tutorials/essentials/postslist-optimized.png b/website/static/img/tutorials/essentials/postslist-optimized.png
new file mode 100644
index 0000000000..6427298f4d
Binary files /dev/null and b/website/static/img/tutorials/essentials/postslist-optimized.png differ
diff --git a/website/static/img/tutorials/essentials/postslist-rerender.png b/website/static/img/tutorials/essentials/postslist-rerender.png
new file mode 100644
index 0000000000..973d54c8b9
Binary files /dev/null and b/website/static/img/tutorials/essentials/postslist-rerender.png differ
diff --git a/website/static/img/tutorials/essentials/userpage-rerender.png b/website/static/img/tutorials/essentials/userpage-rerender.png
new file mode 100644
index 0000000000..cb77d356f7
Binary files /dev/null and b/website/static/img/tutorials/essentials/userpage-rerender.png differ