Merge branch 'master' into v1.3.0-integration

README.md

@@ -7,11 +7,34 @@
 
 **The official, opinionated, batteries-included toolset for efficient Redux development**
 
-`npm install @reduxjs/toolkit`
-
 (Formerly known as "Redux Starter Kit")
 
-### Purpose
+## Installation
+
+### Using Create React App
+
+The recommended way to start new apps with React and Redux Toolkit 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 React Redux's integration with React components.
+
+```sh
+npx create-react-app my-app --template redux
+```
+
+### An Existing 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
+```
+
+It is also available as a precompiled UMD package that defines a `window.RTK` global variable.
+The UMD package can be used as a [`<script>` tag](https://unpkg.com/@reduxjs/toolkit/dist/redux-toolkit.umd.js) directly.
+
+## Purpose
 
 The **Redux Toolkit** package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux:
 
@@ -23,7 +46,7 @@ We can't solve every use case, but in the spirit of [`create-react-app`](https:/
 
 This package is _not_ intended to solve every possible use case for Redux, and is deliberately limited in scope. It does _not_ address concepts like "reusable encapsulated Redux modules", data fetching, folder or file structures, managing entity relationships in the store, and so on.
 
-### What's Included
+## What's Included
 
 Redux Toolkit includes:
 

docs/introduction/quick-start.md

@@ -35,6 +35,16 @@ Redux Toolkit includes:
 
 ## Installation
 
+### Using Create React App
+
+The recommended way to start new apps with React and Redux Toolkit 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 React Redux's integration with React components.
+
+```sh
+npx create-react-app my-app --template redux
+```
+
+### An Existing App
+
 Redux Toolkit is available as a package on NPM for use with a module bundler or in a Node application:
 
 ```bash

docs/tutorials/basic-tutorial.md

@@ -80,7 +80,7 @@ document.getElementById('increment').addEventListener('click', () => {
 })
 ```
 
-Since the example is small, that doesn't make too much of a difference in appearance. Size-wise, we saved a couple lines by using a default argument, but writing those action creator functions made things bigger. And, there's some duplication here. Writing `const INCREMENT = 'INCREMENT"` just looks silly :) Especially when it's only being used in two places - the action creator and the reducer.
+Since the example is small, that doesn't make too much of a difference in appearance. Size-wise, we saved a couple lines by using a default argument, but writing those action creator functions made things bigger. And, there's some duplication here. Writing `const INCREMENT = 'INCREMENT'` just looks silly :) Especially when it's only being used in two places - the action creator and the reducer.
 
 In addition, switch statements bother many people. It would be nice if we could replace it with some kind of a lookup table instead.
 

docs/tutorials/intermediate-tutorial.md

@@ -260,7 +260,7 @@ The first step is to copy `reducers/todos.spec.js` over to `features/todos/todos
 
 Once that is done, we need to update the tests to match how RTK works.
 
-The first issue is that the test file hardcodes action types like `'ADD_TODO"`. RTK's action types look like `'todos/addTodo'`. We can reference that by also importing the action creators from the todos slice, and replacing the original type constants in the test with `addTodo.type`.
+The first issue is that the test file hardcodes action types like `'ADD_TODO'`. RTK's action types look like `'todos/addTodo'`. We can reference that by also importing the action creators from the todos slice, and replacing the original type constants in the test with `addTodo.type`.
 
 The other problem is that the action objects in the tests look like `{type, id, text}`, whereas RTK always puts those extra values inside `action.payload`. So, we need to modify the test actions to match that.
 
@@ -391,7 +391,7 @@ While we could have kept the imported function named as `todos` so that we can u
 
 If we reload the app, we should still see that `state.todos` is an empty array. But, if we click on "Add Todo", nothing will happen. We're still dispatching actions whose type is `'ADD_TODO'`, while our todos slice is looking for an action type of `'todos/addTodo'`. We need to import the correct action creator and use it in the `AddTodo.js` file.
 
-While we're at it, there's a couple other problems with how the `AddTodo` component is written. First, it's currently using a React "callback ref" to read the current text value from the input when you click "Add Todo". This works, but the standard "React way" to handle form fields is with the "controlled inputs" pattern, where the current field value is stored in the component's state.
+While we're at it, there are a couple of other problems with how the `AddTodo` component is written. First, it's currently using a React "callback ref" to read the current text value from the input when you click "Add Todo". This works, but the standard "React way" to handle form fields is with the "controlled inputs" pattern, where the current field value is stored in the component's state.
 
 Second, the connected component is getting `dispatch` as a prop. Again, this works, but the normal way to use connect is to [pass action creator functions to `connect`](https://react-redux.js.org/using-react-redux/connect-mapdispatch), and then dispatch the actions by calling the functions that were passed in as props.
 

netlify.toml

@@ -1,6 +1,6 @@
 [build]
   base    = "website"
-  publish = "website/build"
+  publish = "build"
   command = "npm run build"
 
 [build.environment]

src/createSlice.ts

@@ -15,7 +15,7 @@ import {
 import { Omit } from './tsHelpers'
 
 /**
- * An action creator atttached to a slice.
+ * An action creator attached to a slice.
  *
  * @deprecated please use PayloadActionCreator directly
  *