You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/usage/migrating-rtk-2.md
+28-30Lines changed: 28 additions & 30 deletions
Original file line number
Diff line number
Diff line change
@@ -50,7 +50,7 @@ We've updated the build output in several ways:
50
50
51
51
-**Build output is no longer transpiled!** Instead we target modern JS syntax (ES2020)
52
52
- 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**.
54
54
55
55
#### Dropping UMD builds
56
56
@@ -70,15 +70,17 @@ If you have strong use cases for us continuing to include UMD build artifacts, p
70
70
71
71
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.
72
72
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.
74
74
75
75
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.
76
76
77
77
#### `createStore` Deprecation
78
78
79
79
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.
80
80
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**.
82
84
83
85
**`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.
84
86
@@ -397,6 +399,29 @@ Since the original `defaultMemoize` function is no longer actually the default,
397
399
398
400
`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.
399
401
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
+
400
425
<divclass="typescript-only">
401
426
402
427
#### `ParametricSelector` Types Removed
@@ -678,33 +703,6 @@ We've updated `configureStore` to add the `autoBatchEnhancer` to the store setup
678
703
679
704
[`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.
680
705
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
-
708
706
### Immer 10.0
709
707
710
708
[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