Merge branch 'master' into tests-typecheck

Author: Methuselah96

.codesandbox/ci.json

@@ -1,7 +1,4 @@
 {
-  "sandboxes": [
-    "vanilla",
-    "vanilla-ts"
-  ],
-  "node": "14"
+  "sandboxes": ["vanilla", "vanilla-ts"],
+  "node": "16"
 }

.github/workflows/test.yaml

@@ -17,6 +17,8 @@ jobs:
               - '.github/**'
               - 'src/**'
               - 'test/**'
+              - '.github/**/*.yaml'
+              - 'tsup.config.ts'
 
   build:
     needs: changes
@@ -129,3 +131,74 @@ jobs:
           yarn check-types
           yarn test:typecheck
           yarn test:types
+
+  test-published-artifact:
+    name: Test Published Artifact ${{ matrix.example }}
+
+    needs: [build]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ['16.x']
+        example:
+          [
+            'cra4',
+            'cra5',
+            'next',
+            'vite',
+            'node-standard',
+            'node-esm',
+            'are-the-types-wrong'
+          ]
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+
+      - name: Clone RTK repo
+        run: git clone https://github.com/reduxjs/redux-toolkit.git ./redux-toolkit
+
+      - name: Check folder contents
+        run: ls -l .
+
+      - name: Install deps
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn install
+
+      - uses: actions/download-artifact@v2
+        with:
+          name: package
+          path: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+
+      - name: Check folder contents
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: ls -l .
+
+      - name: Install build artifact
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn add ./package.tgz
+
+      - name: Show installed package versions
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn info redux && yarn why redux
+
+      - name: Build example
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn build
+
+      - name: Run test step
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn test
+        if: matrix.example != 'are-the-types-wrong'
+
+      - name: Run test step
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        # Ignore "FalseCJS" errors in the `attw` job
+        run: yarn test -n FalseCJS
+        if: matrix.example == 'are-the-types-wrong'

README.md

@@ -8,7 +8,7 @@ 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), and has a rich ecosystem of addons.
 
-![GitHub Workflow Status](https://img.shields.io/github/workflow/status/reduxjs/redux/Tests/master?style=flat-square)
+![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/reduxjs/redux/test.yaml?branch=master&event=push&style=flat-square)
 [![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)

docs/components/_FundamentalsWarning.mdx

@@ -0,0 +1,10 @@
+:::caution
+
+Note that **this tutorial intentionally shows older-style Redux logic patterns that require more code than the "modern Redux" patterns with Redux Toolkit we teach as the right approach for building apps with Redux today**, in order to explain the principles and concepts behind Redux. It's _not_ meant to be a production-ready project.
+
+See these pages to learn how to use "modern Redux" with Redux Toolkit:
+
+- [**The full "Redux Essentials" tutorial**](../tutorials/essentials/part-1-overview-concepts.md), which teaches "how to use Redux, the right way" with Redux Toolkit for real-world apps. **We recommend that all Redux learners should read the "Essentials" tutorial!**
+- [**Redux Fundamentals, Part 8: Modern Redux with Redux Toolkit**](../tutorials/fundamentals/part-8-modern-redux.md), which shows how to convert the low-level examples from earlier sections into modern Redux Toolkit equivalents
+
+:::

docs/faq/CodeStructure.md

@@ -202,9 +202,9 @@ axiosInstance.interceptors.request.use(config => {
 Then, in your entry point file, inject the store into the API setup file:
 
 ```js title="index.js"
-import store from "./app/store".
-import {injectStore} from "./common/api";
-injectStore(store);
+import store from './app/store'
+import { injectStore } from './common/api'
+injectStore(store)
 ```
 
 This way, the application setup is the only code that has to import the store, and the file dependency graph avoids circular dependencies.

docs/introduction/why-rtk-is-redux-today.md

@@ -18,6 +18,16 @@ 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.
 
+:::tip
+
+See these pages to learn how to use "modern Redux" with Redux Toolkit:
+
+- [**The "Redux Essentials" tutorial**](../tutorials/essentials/part-1-overview-concepts.md), which teaches "how to use Redux, the right way" with Redux Toolkit for real-world apps,
+- [**Redux Fundamentals, Part 8: Modern Redux with Redux Toolkit**](../tutorials/fundamentals/part-8-modern-redux.md), which shows how to convert the low-level examples from earlier sections of the tutorial into modern Redux Toolkit equivalents
+- [**Using Redux: Migrating to Modern Redux**](../usage/migrating-to-modern-redux.mdx), which covers how to migrate different kinds of legacy Redux logic into modern Redux equivalents
+
+:::
+
 ## How Redux Toolkit Is Different Than the Redux Core
 
 ### What Is "Redux"?
@@ -55,7 +65,7 @@ Other than that, all the other Redux-related logic in your app has to be written
 
 The good news is that this means Redux _can_ be used in many different ways. The bad news is that there are no helpers to make any of your code easier to write.
 
-For example, a reducer function is _just_ a function. Prior to Redux Toolkit, you'd typically write it that reducer with a `switch` statement and manual updates. You'd also probably have hand-written action creators and action type constants along with it:
+For example, a reducer function is _just_ a function. Prior to Redux Toolkit, you'd typically write that reducer with a `switch` statement and manual updates. You'd also probably have hand-written action creators and action type constants along with it:
 
 ```js title="Legacy hand-written Redux usage"
 const ADD_TODO = 'ADD_TODO'
@@ -230,7 +240,7 @@ If you are using the `redux` core package by itself, your code will continue to
 
 See these docs pages and blog posts for more details
 
-- [Redux Essentials: Redux App Structure](../tutorials/essentials/part-2-app-structure.md)
+- [Redux Essentials: Redux Toolkit App Structure](../tutorials/essentials/part-2-app-structure.md)
 - [Redux Fundamentals: Modern Redux with Redux Toolkit](../tutorials/fundamentals/part-8-modern-redux.md)
 - [Redux Style Guide: Best Practices and Recommendations](../style-guide/style-guide.md)
 - [Presentation: Modern Redux with Redux Toolkit](https://blog.isquaredsoftware.com/2022/06/presentations-modern-redux-rtk/)

docs/redux-toolkit/overview.md

@@ -59,7 +59,7 @@ Redux Toolkit includes:
 - [`createEntityAdapter`](https://redux-toolkit.js.org/api/createEntityAdapter): generates a set of reusable reducers and selectors to manage normalized data in the store
 - The [`createSelector` utility](https://redux-toolkit.js.org/api/createSelector) from the [Reselect](https://github.com/reduxjs/reselect) library, re-exported for ease of use.
 
-Redux Toolkit also has a new [**RTK Query data fetching API**](https://redux-toolkit.js.org/rtk-query/overview). RTK Query is a powerful data fetching and caching tool built specifically for Redux. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.
+Redux Toolkit also has the [**RTK Query data fetching API**](https://redux-toolkit.js.org/rtk-query/overview). RTK Query is a powerful data fetching and caching tool built specifically for Redux. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.
 
 ## Documentation
 

docs/tutorials/essentials/part-1-overview-concepts.md

@@ -143,7 +143,7 @@ This is a small example of **"one-way data flow"**:
 
 ![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.
+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://react.dev/learn/sharing-state-between-components) 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!
 
@@ -459,4 +459,4 @@ Redux does have a number of new terms and concepts to remember. As a reminder, h
 
 ## 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.
+We've seen each of the individual pieces of a Redux app. Next, continue on to [Part 2: Redux Toolkit App Structure](./part-2-app-structure.md), where we'll look at a full working example to see how the pieces fit together.

docs/tutorials/essentials/part-2-app-structure.md

@@ -1,15 +1,15 @@
 ---
 id: part-2-app-structure
-title: 'Redux Essentials, Part 2: Redux App Structure'
-sidebar_label: 'Redux App Structure'
-description: 'The official Redux Essentials tutorial: learn the structure of a typical React + Redux app'
+title: 'Redux Essentials, Part 2: Redux Toolkit App Structure'
+sidebar_label: 'Redux Toolkit App Structure'
+description: 'The official Redux Essentials tutorial: learn the structure of a typical React + Redux Toolkit app'
 ---
 
 import { DetailedExplanation } from '../../components/DetailedExplanation'
 
 :::tip What You'll Learn
 
-- The structure of a typical React + Redux app
+- The structure of a typical React + Redux Toolkit app
 - How to view state changes in the Redux DevTools Extension
 
 :::

docs/tutorials/essentials/part-3-data-flow.md

@@ -23,7 +23,7 @@ import { DetailedExplanation } from '../../components/DetailedExplanation'
 
 ## 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.
+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 Toolkit 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.