Skip to content

Commit c2f0389

Browse files
committed
Part 1-2 edits
1 parent a3358f3 commit c2f0389

File tree

3 files changed

+11
-8
lines changed

3 files changed

+11
-8
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ import { DetailedExplanation } from '../../components/DetailedExplanation'
1919

2020
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.
2121

22-
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: Redux App Structure](./part-2-app-structure.md) we'll examine a basic React + Redux app to see how the pieces fit together.
22+
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: Redux App Structure](./part-2-app-structure.md) we'll examine a typical React + Redux app to see how the pieces fit together.
2323

2424
Starting in [Part 3: Basic Redux Data Flow](./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.
2525

2626
### How to Read This Tutorial
2727

28-
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.
28+
This tutorial focuses on showing you _how_ to use Redux the right way, and explains concepts along the way so that you can understand how to build Redux apps correctly.
2929

3030
We've tried to keep these explanations beginner-friendly, but we do need to make some assumptions about what you know already:
3131

@@ -35,6 +35,7 @@ We've tried to keep these explanations beginner-friendly, but we do need to make
3535
- Familiarity with [ES2015 syntax and features](https://www.taniarascia.com/es6-syntax-and-feature-overview/)
3636
- Knowledge of React terminology: [JSX](https://react.dev/learn/writing-markup-with-jsx), [Function Components](https://react.dev/learn/your-first-component), [Props](https://react.dev/learn/passing-props-to-a-component), [State](https://react.dev/learn/state-a-components-memory), and [Hooks](https://react.dev/reference/react)
3737
- Knowledge of [asynchronous JavaScript](https://javascript.info/promise-basics) and [making HTTP requests](https://javascript.info/fetch)
38+
- Basic understanding of [TypeScript syntax and usage](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
3839

3940
:::
4041

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ export const store = configureStore({
190190
})
191191
```
192192

193-
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.
193+
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**.
194194

195195
<DetailedExplanation title="Detailed Explanation: Reducers and State Structure">
196196

@@ -415,7 +415,7 @@ But, here's something _very_ important to remember:
415415

416416
:::warning
417417

418-
**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!**
418+
**You can _only_ write "mutating" logic in Redux Toolkit's `createSlice` and `createReducer` because they use Immer inside! If you write mutating logic in your code without Immer, it _will_ mutate the state and cause bugs!**
419419

420420
:::
421421

@@ -488,7 +488,7 @@ Note that you **don't have to create separate selector functions for every field
488488

489489
:::info More Info on Selectors
490490

491-
**[TODO]** We'll learn more about selector functions in [Part 4: Using Redux Data](./part-4-using-data.md), and look at how they can be optimized in [Part 6: Performance](./part-6-performance-normalization.md)
491+
We'll learn more about selector functions in [Part 4: Using Redux Data](./part-4-using-data.md#reading-data-with-selectors), and look at how they can be optimized in [Part 6: Performance](./part-6-performance-normalization.md#memoizing-selector-functions)
492492

493493
See [Deriving Data with Selectors](../../usage/deriving-data-selectors.md) for a longer look at why and how to use selector functions.
494494

@@ -500,8 +500,8 @@ So far, all the logic in our application has been synchronous. Actions are dispa
500500

501501
A **thunk** is a specific kind of Redux function that can contain asynchronous logic. Thunks are written using two functions:
502502

503-
- An inside thunk function, which gets `dispatch` and `getState` as arguments
504-
- The outside creator function, which creates and returns the thunk function
503+
- An inner thunk function, which gets `dispatch` and `getState` as arguments
504+
- The outer creator function, which creates and returns the thunk function
505505

506506
The next function that's exported from `counterSlice` is an example of a thunk action creator:
507507

@@ -600,6 +600,8 @@ export const counterSlice = createSlice({
600600
})
601601
```
602602

603+
If you're curious _why_ we use thunks for async logic, see this deeper explanation:
604+
603605
<DetailedExplanation title="Detailed Explanation: Thunks and Async Logic">
604606

605607
We know that we're not allowed to put any kind of async logic in reducers. But, that logic has to live somewhere.

docs/tutorials/essentials/part-4-using-data.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -441,7 +441,7 @@ const handleSubmit = (e: React.FormEvent<AddPostFormElements>) => {
441441
}
442442
```
443443
444-
## Writing Selectors for Slices
444+
## Reading Data With Selectors
445445
446446
We now have a couple different components that are looking up a post by ID, and repeating the `state.posts.find()` call. This is duplicate code, and it's always worth _considering_ if we should de-duplicate things. It's also fragile - as we'll see in later sections, we are eventually going to start changing the posts slice state structure. When we do that, we'll have to find each place that we reference `state.posts` and update the logic accordingly. TypeScript will help catch broken code that no longer matches the expected state type by throwing errors at compile time, but 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, and didn't have to repeat logic in the components.
447447

0 commit comments

Comments
 (0)