Skip to content

Commit

Permalink
Improve warnings and add to Fundamentals parts 1 and 5
Browse files Browse the repository at this point in the history
  • Loading branch information
markerikson committed Mar 7, 2023
1 parent ac4f4d8 commit 5714b04
Showing 3 changed files with 16 additions and 16 deletions.
4 changes: 2 additions & 2 deletions docs/components/_FundamentalsWarning.mdx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
:::caution

Note that **this tutorial intentionally shows older-style patterns that require more code than the "modern Redux" patterns 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.
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
- [**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,

:::
18 changes: 4 additions & 14 deletions docs/tutorials/fundamentals/part-1-overview.md
Original file line number Diff line number Diff line change
@@ -7,6 +7,9 @@ description: 'The official Fundamentals tutorial for Redux: learn the fundamenta

import { DetailedExplanation } from '../../components/DetailedExplanation'

<!-- prettier-ignore -->
import FundamentalsWarning from "../../components/_FundamentalsWarning.mdx";

# Redux Fundamentals, Part 1: Redux Overview

:::tip What You'll Learn
@@ -28,23 +31,10 @@ Starting in [Part 3: State, Actions, and Reducers](./part-3-state-actions-reduce

**This tutorial will teach you "how Redux works"**, as well as _why_ these patterns exist.

:::tip

Note that **this tutorial intentionally shows older-style patterns that require more code than the "modern Redux" patterns we teach as the right approach for building apps with Redux today**, in order to explain the principles and concepts behind Redux. **The initial code will be less concise than the way we suggest writing real app code**, but writing it out long-hand is the best way to learn.

:::
<FundamentalsWarning />

Once you understand how everything fits together, we'll look at using Redux Toolkit to simplify things. **Redux Toolkit is the recommended way to build production apps with Redux**, and is built on all of the concepts that we will look at throughout this tutorial. Once you understand the core concepts covered here, you'll understand how to use Redux Toolkit more efficiently.

:::info

If you're looking to learn more about how Redux is used to write real-world applications, please see:

- [**The "Modern Redux" page in this tutorial**](./part-8-modern-redux.md), which shows how to convert the low-level examples from earlier sections into the modern patterns we do recommend for real-world usage
- [**The "Redux Essentials" tutorial**](../essentials/part-1-overview-concepts.md), which teaches "how to use Redux, the right way" for real-world apps, using our latest recommended patterns and practices.

:::

We've tried to keep these explanations beginner-friendly, but we do need to make some assumptions about what you know already so that we can focus on explaining Redux itself. **This tutorial assumes that you know**:

:::important Prerequisites
10 changes: 10 additions & 0 deletions docs/tutorials/fundamentals/part-5-ui-and-react.md
Original file line number Diff line number Diff line change
@@ -22,6 +22,16 @@ In [Part 4: Store](./part-4-store.md), we saw how to create a Redux store, dispa

In this section, we'll add a User Interface for our todo app. We'll see how Redux works with a UI layer overall, and we'll specifically cover how Redux works together with React.

:::caution

Note that **this page and all of the "Essentials" tutorial teach using [our modern React-Redux hooks API](https://react-redux.js.org/api/hooks)**. The old-style [`connect` API](https://react-redux.js.org/api/connect) still works, but today we want all Redux users using the hooks API.

Also, the other pages in this tutorial intentionally show 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.

See [**the "Redux Essentials" tutorial**](../tutorials/essentials/part-1-overview-concepts.md) for full examples of "how to use Redux, the right way" with Redux Toolkit and React-Redux hooks for real-world apps.

:::

## Integrating Redux with a UI

Redux is a standalone JS library. As we've already seen, you can create and use a Redux store even if you don't have a user interface set up. This also means that **you can use Redux with any UI framework** (or even without _any_ UI framework), and use it on both client and server. You can write Redux apps with React, Vue, Angular, Ember, jQuery, or vanilla JavaScript.

0 comments on commit 5714b04

Please sign in to comment.