Skip to content

Commit cf167c3

Browse files
committed
Final migration tweaks
1 parent 572675a commit cf167c3

File tree

1 file changed

+28
-30
lines changed

1 file changed

+28
-30
lines changed

docs/usage/migrating-rtk-2.md

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ We've updated the build output in several ways:
5050

5151
- **Build output is no longer transpiled!** Instead we target modern JS syntax (ES2020)
5252
- Moved all build artifacts to live under `./dist/`, instead of separate top-level folders
53-
- The lowest Typescript version we test against is now 4.7
53+
- The lowest Typescript version we test against is now **TS 4.7**.
5454

5555
#### Dropping UMD builds
5656

@@ -70,15 +70,17 @@ If you have strong use cases for us continuing to include UMD build artifacts, p
7070

7171
We've always specifically told our users that [actions and state _must_ be serializable](https://redux.js.org/style-guide/#do-not-put-non-serializable-values-in-state-or-actions), and that `action.type` _should_ be a string. This is both to ensure that actions are serializable, and to help provide a readable action history in the Redux DevTools.
7272

73-
`store.dispatch(action)` now specifically enforces that `action.type` _must_ be a string and will throw an error if not, in the same way it throws an error if the action is not a plain object.
73+
`store.dispatch(action)` now specifically enforces that **`action.type` _must_ be a string** and will throw an error if not, in the same way it throws an error if the action is not a plain object.
7474

7575
In practice, this was already true 99.99% of the time and shouldn't have any effect on users (especially those using Redux Toolkit and `createSlice`), but there may be some legacy Redux codebases that opted to use Symbols as action types.
7676

7777
#### `createStore` Deprecation
7878

7979
In [Redux 4.2.0, we marked the original `createStore` method as `@deprecated`](https://github.com/reduxjs/redux/releases/tag/v4.2.0). Strictly speaking, **this is _not_ a breaking change**, nor is it new in 5.0, but we're documenting it here for completeness.
8080

81-
**This deprecation is solely a _visual_ indicator that is meant to encourage users to [migrate their apps from legacy Redux patterns to use the modern Redux Toolkit APIs](https://redux.js.org/usage/migrating-to-modern-redux)**. The deprecation results in a visual strikethrough when imported and used, like ~~`createStore`~~, but with _no_ runtime errors or warnings.
81+
**This deprecation is solely a _visual_ indicator that is meant to encourage users to [migrate their apps from legacy Redux patterns to use the modern Redux Toolkit APIs](https://redux.js.org/usage/migrating-to-modern-redux)**.
82+
83+
The deprecation results in a **visual strikethrough** when imported and used, like **~~`createStore`~~**, but with **_no_ runtime errors or warnings**.
8284

8385
**`createStore` will continue to work indefinitely, and will _not_ ever be removed**. But, today we want _all_ Redux users to be using Redux Toolkit for all of their Redux logic.
8486

@@ -397,6 +399,29 @@ Since the original `defaultMemoize` function is no longer actually the default,
397399

398400
`createSelector` now does checks in development mode for common mistakes, like input selectors that always return new references, or result functions that immediately return their argument. These checks can be customized at selector creation or globally.
399401

402+
This is important, as an input selector returning a materially different result with the same parameters means that the output selector will never memoize correctly and be run unnecessarily, thus (potentially) creating a new result and causing rerenders.
403+
404+
```ts
405+
const addNumbers = createSelector(
406+
// this input selector will always return a new reference when run
407+
// so cache will never be used
408+
(a, b) => ({ a, b }),
409+
({ a, b }) => ({ total: a + b })
410+
)
411+
// instead, you should have an input selector for each stable piece of data
412+
const addNumbersStable = createSelector(
413+
(a, b) => a,
414+
(a, b) => b,
415+
(a, b) => ({
416+
total: a + b,
417+
})
418+
)
419+
```
420+
421+
This is done the first time the selector is called, unless configured otherwise. More details are available in the [Reselect docs on dev-mode checks](https://reselect.js.org/api/development-only-stability-checks).
422+
423+
Note that while RTK re-exports `createSelector`, it intentionally does not re-export the function to configure this check globally - if you wish to do so, you should instead depend on `reselect` directly and import it yourself.
424+
400425
<div class="typescript-only">
401426

402427
#### `ParametricSelector` Types Removed
@@ -678,33 +703,6 @@ We've updated `configureStore` to add the `autoBatchEnhancer` to the store setup
678703

679704
[`entityAdapter.getSelectors()`](../api/createEntityAdapter#selector-functions) now accepts an options object as its second argument. This allows you to pass in your own preferred `createSelector` method, which will be used to memoize the generated selectors. This could be useful if you want to use one of Reselect's new alternate memoizers, or some other memoization library with an equivalent signature.
680705

681-
### New dev checks in Reselect v5
682-
683-
Reselect v5 includes a dev-only check to check stability of input selectors, by running them an extra time with the same parameters, and checking that the result matches.
684-
685-
This is important, as an input selector returning a materially different result with the same parameters means that the output selector will be run unnecessarily, thus (potentially) creating a new result and causing rerenders.
686-
687-
```ts
688-
const addNumbers = createSelector(
689-
// this input selector will always return a new reference when run
690-
// so cache will never be used
691-
(a, b) => ({ a, b }),
692-
({ a, b }) => ({ total: a + b })
693-
)
694-
// instead, you should have an input selector for each stable piece of data
695-
const addNumbersStable = createSelector(
696-
(a, b) => a,
697-
(a, b) => b,
698-
(a, b) => ({
699-
total: a + b,
700-
})
701-
)
702-
```
703-
704-
This is done the first time the selector is called, unless configured otherwise. More details are available in the [README](https://github.com/reduxjs/reselect#inputstabilitycheck).
705-
706-
Note that RTK intentionally does not re-export the function to configure this check globally - if you wish to do so, you should instead depend on `reselect` directly and import it yourself.
707-
708706
### Immer 10.0
709707

710708
[Immer 10.0](https://github.com/immerjs/immer/releases/tag/v10.0.0) is now final, and has several major improvements and updates:

0 commit comments

Comments
 (0)