Skip to content

Commit 31ce42b

Browse files
authored
Create Thinking in Redux category and move some pages in it (#3889)
1 parent dc2744c commit 31ce42b

File tree

11 files changed

+37
-22
lines changed

11 files changed

+37
-22
lines changed

docs/basics/DataFlow.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Redux architecture revolves around a **strict unidirectional data flow**.
1111

1212
This means that all data in an application follows the same lifecycle pattern, making the logic of your app more predictable and easier to understand. It also encourages data normalization, so that you don't end up with multiple, independent copies of the same data that are unaware of one another.
1313

14-
If you're still not convinced, read [Motivation](../introduction/Motivation.md) and [The Case for Flux](https://medium.com/@dan_abramov/the-case-for-flux-379b7d1982c6) for a compelling argument in favor of unidirectional data flow. Although [Redux is not exactly Flux](../introduction/PriorArt.md), it shares the same key benefits.
14+
If you're still not convinced, read [Motivation](../understanding/thinking-in-redux/Motivation.md) and [The Case for Flux](https://medium.com/@dan_abramov/the-case-for-flux-379b7d1982c6) for a compelling argument in favor of unidirectional data flow. Although [Redux is not exactly Flux](../understanding/history-and-design/PriorArt.md), it shares the same key benefits.
1515

1616
The data lifecycle in any Redux app follows these 4 steps:
1717

docs/basics/Store.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ You can see how this causes the state held by the store to change:
6868

6969
<img src='https://i.imgur.com/zMMtoMz.png' width='70%' />
7070

71-
We specified the behavior of our app before we even started writing the UI. We won't do this in this tutorial, but at this point you can write tests for your reducers and action creators. You won't need to mock anything because they are just [pure](../introduction/ThreePrinciples.md#changes-are-made-with-pure-functions) functions. Call them, and make assertions on what they return.
71+
We specified the behavior of our app before we even started writing the UI. We won't do this in this tutorial, but at this point you can write tests for your reducers and action creators. You won't need to mock anything because they are just [pure](../understanding/thinking-in-redux/ThreePrinciples.md#changes-are-made-with-pure-functions) functions. Call them, and make assertions on what they return.
7272

7373
## Source Code
7474

docs/faq/General.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ In the end, Redux is just a tool. It's a great tool, and there are some great re
5959

6060
**Documentation**
6161

62-
- [Introduction: Motivation](../introduction/Motivation.md)
62+
- [Thinking in Redux: Motivation](../understanding/thinking-in-redux/Motivation.md)
6363

6464
**Articles**
6565

docs/introduction/README.md

-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
# Introduction
22

3-
- [Motivation](Motivation.md)
43
- [Core Concepts](CoreConcepts.md)
5-
- [Three Principles](ThreePrinciples.md)
6-
- [Prior Art](PriorArt.md)
74
- [Learning Resources](LearningResources.md)
85
- [Ecosystem](Ecosystem.md)
96
- [Examples](Examples.md)

docs/recipes/ReducingBoilerplate.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ hide_title: true
66

77
# Reducing Boilerplate
88

9-
Redux is in part [inspired by Flux](../introduction/PriorArt.md), and the most common complaint about Flux is how it makes you write a lot of boilerplate. In this recipe, we will consider how Redux lets us choose how verbose we'd like our code to be, depending on personal style, team preferences, longer term maintainability, and so on.
9+
Redux is in part [inspired by Flux](../understanding/history-and-design/PriorArt.md), and the most common complaint about Flux is how it makes you write a lot of boilerplate. In this recipe, we will consider how Redux lets us choose how verbose we'd like our code to be, depending on personal style, team preferences, longer term maintainability, and so on.
1010

1111
## Actions
1212

13-
Actions are plain objects describing what happened in the app, and serve as the sole way to describe an intention to mutate the data. It's important that **actions being objects you have to dispatch is not boilerplate, but one of the [fundamental design choices](../introduction/ThreePrinciples.md) of Redux**.
13+
Actions are plain objects describing what happened in the app, and serve as the sole way to describe an intention to mutate the data. It's important that **actions being objects you have to dispatch is not boilerplate, but one of the [fundamental design choices](../understanding/thinking-in-redux/ThreePrinciples.md) of Redux**.
1414

1515
There are frameworks claiming to be similar to Flux, but without a concept of action objects. In terms of being predictable, this is a step backwards from Flux or Redux. If there are no serializable plain object actions, it is impossible to record and replay user sessions, or to implement [hot reloading with time travel](https://www.youtube.com/watch?v=xsSnOQynTHs). If you'd rather modify data directly, you don't need Redux.
1616

docs/style-guide/style-guide.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -430,7 +430,7 @@ If multiple dispatches are truly necessary, consider batching the updates in som
430430

431431
### Evaluate Where Each Piece of State Should Live
432432

433-
The ["Three Principles of Redux"](../introduction/ThreePrinciples.md) says that "the state of your whole application is stored in a single tree". This phrasing has been over-interpreted. It does not mean that literally _every_ value in the entire app _must_ be kept in the Redux store. Instead, **there should be a single place to find all values that _you_ consider to be global and app-wide**. Values that are "local" should generally be kept in the nearest UI component instead.
433+
The ["Three Principles of Redux"](../understanding/thinking-in-redux/ThreePrinciples.md) says that "the state of your whole application is stored in a single tree". This phrasing has been over-interpreted. It does not mean that literally _every_ value in the entire app _must_ be kept in the Redux store. Instead, **there should be a single place to find all values that _you_ consider to be global and app-wide**. Values that are "local" should generally be kept in the nearest UI component instead.
434434

435435
Because of this, it is up to you as a developer to decide what state should actually live in the Redux store, and what should stay in component state. **[Use these rules of thumb to help evaluate each piece of state and decide where it should live](../faq/OrganizingState.md#do-i-have-to-put-all-my-state-into-redux-should-i-ever-use-reacts-setstate)**.
436436

docs/introduction/PriorArt.md renamed to docs/understanding/history-and-design/PriorArt.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Redux was inspired by several important qualities of [Flux](https://facebook.git
1515

1616
Unlike Flux, **Redux does not have the concept of a Dispatcher**. This is because it relies on pure functions instead of event emitters, and pure functions are easy to compose and don't need an additional entity managing them. Depending on how you view Flux, you may see this as either a deviation or an implementation detail. Flux has often been [described as `(state, action) => state`](https://speakerdeck.com/jmorrell/jsconf-uy-flux-those-who-forget-the-past-dot-dot-dot-1). In this sense, Redux is true to the Flux architecture, but makes it simpler thanks to pure functions.
1717

18-
Another important difference from Flux is that **Redux assumes you never mutate your data**. You can use plain objects and arrays for your state just fine, but mutating them inside the reducers is strongly discouraged. You should always return a new object, which is easy with the [object spread operator proposal](../recipes/UsingObjectSpreadOperator.md), or with a library like [Immutable](https://facebook.github.io/immutable-js).
18+
Another important difference from Flux is that **Redux assumes you never mutate your data**. You can use plain objects and arrays for your state just fine, but mutating them inside the reducers is strongly discouraged. You should always return a new object, which is easy with the [object spread operator proposal](../../recipes/UsingObjectSpreadOperator.md), or with a library like [Immutable](https://facebook.github.io/immutable-js).
1919

2020
While it is technically _possible_ to [write impure reducers](https://github.com/reduxjs/redux/issues/328#issuecomment-125035516) that mutate the data for performance corner cases, we actively discourage you from doing this. Development features like time travel, record/replay, or hot reloading will break. Moreover it doesn't seem like immutability poses performance problems in most real apps, because, as [Om](https://github.com/omcljs/om) demonstrates, even if you lose out on object allocation, you still win by avoiding expensive re-renders and re-calculations, as you know exactly what changed thanks to reducer purity.
2121

docs/introduction/ThreePrinciples.md renamed to docs/understanding/thinking-in-redux/ThreePrinciples.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Redux can be described in three fundamental principles:
1111

1212
### Single source of truth
1313

14-
**The [global state](../Glossary.md#state) of your application is stored in an object tree within a single [store](../Glossary.md#store).**
14+
**The [global state](../../Glossary.md#state) of your application is stored in an object tree within a single [store](../../Glossary.md#store).**
1515

1616
This makes it easy to create universal apps, as the state from your server can be serialized and hydrated into the client with no extra coding effort. A single state tree also makes it easier to debug or inspect an application; it also enables you to persist your app's state in development, for a faster development cycle. Some functionality which has been traditionally difficult to implement - Undo/Redo, for example - can suddenly become trivial to implement, if all of your state is stored in a single tree.
1717

@@ -37,7 +37,7 @@ console.log(store.getState())
3737

3838
### State is read-only
3939

40-
**The only way to change the state is to emit an [action](../Glossary.md#action), an object describing what happened.**
40+
**The only way to change the state is to emit an [action](../../Glossary.md#action), an object describing what happened.**
4141

4242
This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.
4343

@@ -55,7 +55,7 @@ store.dispatch({
5555

5656
### Changes are made with pure functions
5757

58-
**To specify how the state tree is transformed by actions, you write pure [reducers](../Glossary.md#reducer).**
58+
**To specify how the state tree is transformed by actions, you write pure [reducers](../../Glossary.md#reducer).**
5959

6060
Reducers are just pure functions that take the previous state and an action, and return the next state. Remember to return new state objects, instead of mutating the previous state. You can start with a single reducer, and as your app grows, split it off into smaller reducers that manage specific parts of the state tree. Because reducers are just functions, you can control the order in which they are called, pass additional data, or even make reusable reducers for common tasks such as pagination.
6161

website/_redirects

+12-6
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131

3232
/introduction/coreconcepts* /introduction/core-concepts:splat
3333
/introduction/learningresources* /introduction/learning-resources:splat
34-
/introduction/priorart* /introduction/prior-art:splat
35-
/introduction/threeprinciples* /introduction/three-principles:splat
34+
/introduction/priorart* /understanding/history-and-design/prior-art:splat
35+
/introduction/threeprinciples* /understanding/thinking-in-redux/three-principles:splat
3636
/introduction /introduction/getting-started
3737

3838

@@ -65,11 +65,11 @@
6565

6666
# Old old Gitbook links?
6767
/docs/introduction/CoreConcepts.html /introduction/core-concepts
68-
/docs/introduction/Motivation.html /introduction/motivation
68+
/docs/introduction/Motivation.html /understanding/thinking-in-redux/motivation
6969
/docs/introduction/Ecosystem.html* /introduction/ecosystem:splat
7070
/docs/introduction/CoreConcepts.html /introduction/core-concepts
71-
/docs/introduction/PriorArt.html /introduction/prior-art
72-
/docs/introduction/ThreePrinciples.html /introduction/three-principles
71+
/docs/introduction/PriorArt.html /understanding/history-and-design/prior-art
72+
/docs/introduction/ThreePrinciples.html /understanding/thinking-in-redux/three-principles
7373
/docs/introduction/Examples.html* /introduction/examples:splat
7474
/docs/introduction/ /introduction/getting-started
7575

@@ -144,4 +144,10 @@
144144
/feedback /introduction/getting-started#help-and-discussion
145145

146146
# PR preview for the new tutorial
147-
/tutorials/quick-start/quick-start-part-1 /tutorials/essentials/part-1-overview-concepts
147+
/tutorials/quick-start/quick-start-part-1 /tutorials/essentials/part-1-overview-concepts
148+
149+
# 2020 Site reorganization
150+
151+
/introduction/motivation /understanding/thinking-in-redux/motivation
152+
/introduction/three-principles /understanding/thinking-in-redux/three-principles
153+
/introduction/prior-art /understanding/history-and-design/prior-art

website/sidebars.js

+15-3
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,26 @@ module.exports = {
33
Introduction: [
44
'introduction/getting-started',
55
'introduction/installation',
6-
'introduction/motivation',
76
'introduction/core-concepts',
8-
'introduction/three-principles',
9-
'introduction/prior-art',
107
'introduction/learning-resources',
118
'introduction/ecosystem',
129
'introduction/examples'
1310
],
11+
'Understanding Redux': [
12+
{
13+
type: 'category',
14+
label: 'Thinking in Redux',
15+
items: [
16+
'understanding/thinking-in-redux/motivation',
17+
'understanding/thinking-in-redux/three-principles'
18+
]
19+
},
20+
{
21+
type: 'category',
22+
label: 'History and Design',
23+
items: ['understanding/history-and-design/prior-art']
24+
}
25+
],
1426
Tutorials: [
1527
'tutorials/tutorials-index',
1628
{

0 commit comments

Comments
 (0)