Skip to content

Commit 5dcefbe

Browse files
committed
Nuke most "ES2015" references
1 parent ddf44fe commit 5dcefbe

18 files changed

+88
-81
lines changed

docs/api/combineReducers.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ Any reducer passed to `combineReducers` must satisfy these rules:
8080

8181
- It must never return `undefined`. It is too easy to do this by mistake via an early `return` statement, so `combineReducers` throws if you do that instead of letting the error manifest itself somewhere else.
8282

83-
- If the `state` given to it is `undefined`, it must return the initial state for this specific reducer. According to the previous rule, the initial state must not be `undefined` either. It is handy to specify it with ES2015 optional arguments syntax, but you can also explicitly check the first argument for being `undefined`.
83+
- If the `state` given to it is `undefined`, it must return the initial state for this specific reducer. According to the previous rule, the initial state must not be `undefined` either. It is handy to specify it with optional arguments syntax, but you can also explicitly check the first argument for being `undefined`.
8484

8585
While `combineReducers` attempts to check that your reducers conform to some of these rules, you should remember them, and do your best to follow them. `combineReducers` will check your reducers by passing `undefined` to them; this is done even if you specify initial state to `Redux.createStore(combineReducers(...), initialState)`. Therefore, you **must** ensure your reducers work properly when receiving `undefined` as state, even if you never intend for them to actually receive `undefined` in your own code.
8686

docs/faq/Actions.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ There are [many async/side effect middlewares available](https://github.com/mark
114114
As a general rule of thumb:
115115

116116
- Thunks are best for complex synchronous logic (especially code that needs access to the entire Redux store state), and simple async logic (like basic AJAX calls). With the use of `async/await`, it can be reasonable to use thunks for some more complex promise-based logic as well.
117-
- Sagas are best for complex async logic and decoupled "background thread"-type behavior, especially if you need to listen to dispatched actions (which is something that can't be done with thunks). They require familiarity with ES2015 generator functions and `redux-saga`'s "effects" operators.
117+
- Sagas are best for complex async logic and decoupled "background thread"-type behavior, especially if you need to listen to dispatched actions (which is something that can't be done with thunks). They require familiarity with generator functions and `redux-saga`'s "effects" operators.
118118
- Observables solve the same problems as sagas, but rely on RxJS to implement async behavior. They require familiarity with the RxJS API.
119119

120120
We recommend that most Redux users should start with thunks, and then add an additional side effect library like sagas or observables later if their app really requires handling for more complex async logic.

docs/faq/General.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,13 @@ Redux can be used as a data store for any UI layer. The most common usage is wit
104104

105105
## Do I need to have a particular build tool to use Redux?
106106

107-
Redux is originally written in ES2015 and transpiled for production into ES5 with Webpack and Babel. You should be able to use it regardless of your JavaScript build process. Redux also offers a UMD build that can be used directly without any build process at all. The [counter-vanilla](https://github.com/reduxjs/redux/tree/master/examples/counter-vanilla) example demonstrates basic ES5 usage with Redux included as a `<script>` tag. As the relevant pull request says:
107+
Redux is written using modern JS syntax (ES2020), but the code is fairly simple.
108+
109+
If you need to target older browsers, please transpile it yourself.
110+
111+
. You should be able to use it regardless of your JavaScript build process. Redux also offers a UMD build that can be used directly without any build process at all.
112+
113+
The [counter-vanilla](https://github.com/reduxjs/redux/tree/master/examples/counter-vanilla) example demonstrates basic ES5 usage with Redux included as a `<script>` tag. As the relevant pull request says:
108114

109115
> The new Counter Vanilla example is aimed to dispel the myth that Redux requires Webpack, React, hot reloading, sagas, action creators, constants, Babel, npm, CSS modules, decorators, fluent Latin, an Egghead subscription, a PhD, or an Exceeds Expectations O.W.L. level.
110116
>

docs/faq/ImmutableData.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -452,7 +452,7 @@ JavaScript was never designed to provide guaranteed immutable operations. Accord
452452

453453
With JavaScript, you can accidentally mutate an object (such as the Redux state tree) quite easily without realizing it. For example, updating deeply nested properties, creating a new _reference_ to an object instead of a new object, or performing a shallow copy rather than a deep copy, can all lead to inadvertent object mutations, and can trip up even the most experienced JavaScript coder.
454454

455-
To avoid these issues, ensure you follow the recommended [immutable update patterns for ES2015](../usage/structuring-reducers/ImmutableUpdatePatterns.md).
455+
To avoid these issues, ensure you follow the recommended [immutable update patterns](../usage/structuring-reducers/ImmutableUpdatePatterns.md).
456456

457457
### Verbose Code
458458

@@ -470,7 +470,7 @@ In contrast, immutable libraries such as Immer can employ structural sharing, wh
470470

471471
**Documentation**
472472

473-
- [Immutable Update Patterns for ES2015](../usage/structuring-reducers/ImmutableUpdatePatterns.md)
473+
- [Immutable Update Patterns](../usage/structuring-reducers/ImmutableUpdatePatterns.md)
474474

475475
**Articles**
476476

docs/introduction/GettingStarted.md

Lines changed: 59 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,7 @@ It helps you write applications that behave consistently, run in different envir
1313

1414
You can use Redux together with [React](https://reactjs.org), or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of addons available.
1515

16-
## Installation
17-
18-
### Redux Toolkit
19-
20-
[**Redux Toolkit**](https://redux-toolkit.js.org) is our official standard approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.
16+
[**Redux Toolkit**](https://redux-toolkit.js.org) is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.
2117

2218
RTK includes utilities that help simplify many common use cases, including [store setup](https://redux-toolkit.js.org/api/configureStore),
2319
[creating reducers and writing immutable update logic](https://redux-toolkit.js.org/api/createreducer),
@@ -27,6 +23,10 @@ Whether you're a brand new Redux user setting up your first project, or an exper
2723
simplify an existing application, **[Redux Toolkit](https://redux-toolkit.js.org/)** can help you
2824
make your Redux code better.
2925

26+
## Installation
27+
28+
### Redux Toolkit
29+
3030
Redux Toolkit is available as a package on NPM for use with a module bundler or in a Node application:
3131

3232
```bash
@@ -79,6 +79,60 @@ The whole global state of your app is stored in an object tree inside a single _
7979
The only way to change the state tree is to create an _action_, an object describing what happened, and _dispatch_ it to the store.
8080
To specify how state gets updated in response to an action, you write pure _reducer_ functions that calculate a new state based on the old state and the action.
8181

82+
Redux Toolkit simplifies the process of writing Redux logic and setting up the store. With Redux Toolkit, the basic app logic looks like:
83+
84+
```js
85+
import { createSlice, configureStore } from '@reduxjs/toolkit'
86+
87+
const counterSlice = createSlice({
88+
name: 'counter',
89+
initialState: {
90+
value: 0
91+
},
92+
reducers: {
93+
incremented: state => {
94+
// Redux Toolkit allows us to write "mutating" logic in reducers. It
95+
// doesn't actually mutate the state because it uses the Immer library,
96+
// which detects changes to a "draft state" and produces a brand new
97+
// immutable state based off those changes
98+
state.value += 1
99+
},
100+
decremented: state => {
101+
state.value -= 1
102+
}
103+
}
104+
})
105+
106+
export const { incremented, decremented } = counterSlice.actions
107+
108+
const store = configureStore({
109+
reducer: counterSlice.reducer
110+
})
111+
112+
// Can still subscribe to the store
113+
store.subscribe(() => console.log(store.getState()))
114+
115+
// Still pass action objects to `dispatch`, but they're created for us
116+
store.dispatch(incremented())
117+
// {value: 1}
118+
store.dispatch(incremented())
119+
// {value: 2}
120+
store.dispatch(decremented())
121+
// {value: 1}
122+
```
123+
124+
Instead of mutating the state directly, you specify the mutations you want to happen with plain objects called _actions_. Then you write a special function called a _reducer_ to decide how every action transforms the entire application's state.
125+
126+
In a typical Redux app, there is just a single store with a single root reducing function. As your app grows, you split the root reducer into smaller reducers independently operating on the different parts of the state tree. This is exactly like how there is just one root component in a React app, but it is composed out of many small components.
127+
128+
This architecture might seem like a lot for a counter app, but the beauty of this pattern is how well it scales to large and complex apps. It also enables very powerful developer tools, because it is possible to trace every mutation to the action that caused it. You can record user sessions and reproduce them just by replaying every action.
129+
130+
Redux Toolkit allows us to write shorter logic that's easier to read, while still following the same Redux behavior and data flow.
131+
132+
### Legacy Example
133+
134+
For comparison, the original Redux legacy syntax (with no abstractions) looks like this:
135+
82136
```js
83137
import { createStore } from 'redux'
84138

@@ -125,58 +179,6 @@ store.dispatch({ type: 'counter/decremented' })
125179
// {value: 1}
126180
```
127181

128-
Instead of mutating the state directly, you specify the mutations you want to happen with plain objects called _actions_. Then you write a special function called a _reducer_ to decide how every action transforms the entire application's state.
129-
130-
In a typical Redux app, there is just a single store with a single root reducing function. As your app grows, you split the root reducer into smaller reducers independently operating on the different parts of the state tree. This is exactly like how there is just one root component in a React app, but it is composed out of many small components.
131-
132-
This architecture might seem like a lot for a counter app, but the beauty of this pattern is how well it scales to large and complex apps. It also enables very powerful developer tools, because it is possible to trace every mutation to the action that caused it. You can record user sessions and reproduce them just by replaying every action.
133-
134-
### Redux Toolkit Example
135-
136-
Redux Toolkit simplifies the process of writing Redux logic and setting up the store. With Redux Toolkit, that same logic looks like:
137-
138-
```js
139-
import { createSlice, configureStore } from '@reduxjs/toolkit'
140-
141-
const counterSlice = createSlice({
142-
name: 'counter',
143-
initialState: {
144-
value: 0
145-
},
146-
reducers: {
147-
incremented: state => {
148-
// Redux Toolkit allows us to write "mutating" logic in reducers. It
149-
// doesn't actually mutate the state because it uses the Immer library,
150-
// which detects changes to a "draft state" and produces a brand new
151-
// immutable state based off those changes
152-
state.value += 1
153-
},
154-
decremented: state => {
155-
state.value -= 1
156-
}
157-
}
158-
})
159-
160-
export const { incremented, decremented } = counterSlice.actions
161-
162-
const store = configureStore({
163-
reducer: counterSlice.reducer
164-
})
165-
166-
// Can still subscribe to the store
167-
store.subscribe(() => console.log(store.getState()))
168-
169-
// Still pass action objects to `dispatch`, but they're created for us
170-
store.dispatch(incremented())
171-
// {value: 1}
172-
store.dispatch(incremented())
173-
// {value: 2}
174-
store.dispatch(decremented())
175-
// {value: 1}
176-
```
177-
178-
Redux Toolkit allows us to write shorter logic that's easier to read, while still following the same Redux behavior and data flow.
179-
180182
## Learn Redux
181183

182184
We have a variety of resources available to help you learn Redux.

docs/style-guide/style-guide.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ As mentioned in [Reducers Should Own the State Shape](#reducers-should-own-the-s
237237
The key names in the object passed to `combineReducers` will define the names of the keys in the resulting state object. Be sure to name these keys after the data that is kept inside, and avoid use of the word "reducer" in the key names. Your object should look like `{users: {}, posts: {}}`, rather than `{usersReducer: {}, postsReducer: {}}`.
238238

239239
<DetailedExplanation>
240-
ES2015 object literal shorthand makes it easy to define a key name and a value in an object at the same time:
240+
Object literal shorthand makes it easy to define a key name and a value in an object at the same time:
241241

242242
```js
243243
const data = 42

docs/tutorials/essentials/part-6-performance-normalization.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -822,7 +822,7 @@ When we receive the `fetchPosts.fulfilled` action, we can use the `postsAdapter.
822822

823823
When we receive the `addNewPost.fulfilled` action, we know we need to add that one new post object to our state. We can use the adapter functions as reducers directly, so we'll pass `postsAdapter.addOne` as the reducer function to handle that action.
824824

825-
Finally, we can replace the old hand-written `selectAllPosts` and `selectPostById` selector functions with the ones generated by `postsAdapter.getSelectors`. Since the selectors are called with the root Redux state object, they need to know where to find our posts data in the Redux state, so we pass in a small selector that returns `state.posts`. The generated selector functions are always called `selectAll` and `selectById`, so we can use ES2015 destructuring syntax to rename them as we export them and match the old selector names. We'll also export `selectPostIds` the same way, since we want to read the list of sorted post IDs in our `<PostsList>` component.
825+
Finally, we can replace the old hand-written `selectAllPosts` and `selectPostById` selector functions with the ones generated by `postsAdapter.getSelectors`. Since the selectors are called with the root Redux state object, they need to know where to find our posts data in the Redux state, so we pass in a small selector that returns `state.posts`. The generated selector functions are always called `selectAll` and `selectById`, so we can use destructuring syntax to rename them as we export them and match the old selector names. We'll also export `selectPostIds` the same way, since we want to read the list of sorted post IDs in our `<PostsList>` component.
826826

827827
### Optimizing the Posts List
828828

docs/tutorials/fundamentals/part-3-state-actions-reducers.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@ export default function appReducer(state = initialState, action) {
272272
}
273273
```
274274

275-
A reducer may be called with `undefined` as the state value when the application is being initialized. If that happens, we need to provide an initial state value so the rest of the reducer code has something to work with. **Reducers normally use ES2015 default argument syntax to provide initial state: `(state = initialState, action)`**.
275+
A reducer may be called with `undefined` as the state value when the application is being initialized. If that happens, we need to provide an initial state value so the rest of the reducer code has something to work with. **Reducers normally use default argument syntax to provide initial state: `(state = initialState, action)`**.
276276

277277
Next, let's add the logic to handle the `'todos/todoAdded'` action.
278278

docs/tutorials/fundamentals/part-8-modern-redux.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -801,7 +801,7 @@ export const selectFilteredTodoIds = createSelector(
801801
)
802802
```
803803

804-
We call `todosAdapter.getSelectors`, and pass in a `state => state.todos` selector that returns this slice of state. From there, the adapter generates a `selectAll` selector that takes the _entire_ Redux state tree, as usual, and loops over `state.todos.entities` and `state.todos.ids` to give us the complete array of todo objects. Since `selectAll` doesn't tell us _what_ we're selecting, we can use ES2015 destructuring syntax to rename the function to `selectTodos`. Similarly, we can rename `selectById` to `selectTodoById`.
804+
We call `todosAdapter.getSelectors`, and pass in a `state => state.todos` selector that returns this slice of state. From there, the adapter generates a `selectAll` selector that takes the _entire_ Redux state tree, as usual, and loops over `state.todos.entities` and `state.todos.ids` to give us the complete array of todo objects. Since `selectAll` doesn't tell us _what_ we're selecting, we can use destructuring syntax to rename the function to `selectTodos`. Similarly, we can rename `selectById` to `selectTodoById`.
805805

806806
Notice that our other selectors still use `selectTodos` as an input. That's because it's still returning an array of todo objects this whole time, no matter whether we were keeping the array as the entire `state.todos`, keeping it as a nested array, or storing it as a normalized object and converting to an array. Even as we've made all these changes to how we stored our data, the use of selectors allowed us to keep the rest of our code the same, and the use of memoized selectors has helped the UI perform better by avoiding unnecessary rerenders.
807807

docs/understanding/history-and-design/PriorArt.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,4 +113,4 @@ Meet some of the outstanding companies that made it possible:
113113
- [Webflow](https://github.com/webflow)
114114
- [Ximedes](https://www.ximedes.com/)
115115

116-
[See the full list of Redux patrons](<[PATRONS.md](https://github.com/reduxjs/redux/blob/master/PATRONS.md)>), as well as the always-growing list of [people and companies that use Redux](https://github.com/reduxjs/redux/issues/310).
116+
[See the full list of original Redux patrons](https://github.com/reduxjs/redux/blob/master/PATRONS.md), as well as the always-growing list of [people and companies that use Redux](https://github.com/reduxjs/redux/issues/310).

docs/usage/ServerRendering.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ npm install express react-redux
3939

4040
The following is the outline for what our server side is going to look like. We are going to set up an [Express middleware](https://expressjs.com/guide/using-middleware.html) using [app.use](http://expressjs.com/api.html#app.use) to handle all requests that come in to our server. If you're unfamiliar with Express or middleware, just know that our handleRender function will be called every time the server receives a request.
4141

42-
Additionally, as we are using ES2015 and JSX syntax, we will need to compile with [Babel](https://babeljs.io/) (see [this example of a Node Server with Babel](https://github.com/babel/example-node-server)) and the [React preset](https://babeljs.io/docs/plugins/preset-react/).
42+
Additionally, as we are using modern JS and JSX syntax, we will need to compile with [Babel](https://babeljs.io/) (see [this example of a Node Server with Babel](https://github.com/babel/example-node-server)) and the [React preset](https://babeljs.io/docs/plugins/preset-react/).
4343

4444
##### `server.js`
4545

docs/usage/side-effects-approaches.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ We've intentionally designed the RTK listener middleware to be straightforward t
8585

8686
We specifically recommend _against_ sagas or observables for most reactive logic for multiple reasons:
8787

88-
- Sagas: require understanding ES2015 generator function syntax as well as the saga effects behaviors; add multiple levels of indirection due to needing extra actions dispatched; have poor TypeScript support; and the power and complexity is simply not needed for most Redux use cases.
88+
- Sagas: require understanding generator function syntax as well as the saga effects behaviors; add multiple levels of indirection due to needing extra actions dispatched; have poor TypeScript support; and the power and complexity is simply not needed for most Redux use cases.
8989
- Observables: require understanding the RxJS API and mental model; can be difficult to debug; can add significant bundle size
9090

9191
## Common Side Effects Approaches

0 commit comments

Comments
 (0)