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
- Removed `connectAdvanced` and `pure` descriptions
- Updated all `render()` examples to show `createRoot`
- Added note that `batch` isn't needed with React 18
- Added TS props for `Provider` and documented `serverState`
- Updated TS usage descriptions
- Added warnings about `@types/react@18`
[](http://www.reactiflux.com)
8
+
[](http://www.reactiflux.com)
9
9
10
10
## Installation
11
11
12
12
### Using Create React App
13
13
14
-
The recommended way to start new apps with React Redux is by using the [official Redux+JS template](https://github.com/reduxjs/cra-template-redux) for [Create React App](https://github.com/facebook/create-react-app), which takes advantage of [Redux Toolkit](https://redux-toolkit.js.org/).
14
+
The recommended way to start new apps with React Redux is by using the [official Redux+JS/TS templates](https://github.com/reduxjs/cra-template-redux) for [Create React App](https://github.com/facebook/create-react-app), which takes advantage of [Redux Toolkit](https://redux-toolkit.js.org/).
If you don’t yet use [npm](http://npmjs.com/) or a modern module bundler, and would rather prefer a single-file [UMD](https://github.com/umdjs/umd) build that makes `ReactRedux` available as a global object, you can grab a pre-built version from [cdnjs](https://cdnjs.com/libraries/react-redux). We _don’t_ recommend this approach for any serious application, as most of the libraries complementary to Redux are only available on [npm](http://npmjs.com/).
42
46
43
-
## React Native
44
-
45
-
As of React Native 0.18, React Redux 5.x should work with React Native. If you have any issues with React Redux 5.x on React Native, run `npm ls react` and make sure you don’t have a duplicate React installation in your `node_modules`. We recommend that you use `[email protected]` which is better at avoiding these kinds of issues.
46
-
47
47
## Documentation
48
48
49
-
The React Redux docs are now published at **https://react-redux.js.org** .
50
-
51
-
We're currently expanding and rewriting our docs content - check back soon for more updates!
49
+
The React Redux docs are published at **https://react-redux.js.org** .
52
50
53
51
## How Does It Work?
54
52
55
-
We do a deep dive on how React Redux works in [this readthesource episode](https://www.youtube.com/watch?v=VJ38wSFbM3A).
56
-
57
-
Also, the post [The History and Implementation of React-Redux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/)
53
+
The post [The History and Implementation of React-Redux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/)
58
54
explains what it does, how it works, and how the API and implementation have evolved over time.
59
55
60
-
Enjoy!
56
+
There's also a [Deep Dive into React-Redux](https://blog.isquaredsoftware.com/2019/06/presentation-react-redux-deep-dive/) talk that covers some of the same material at a higher level.
* An optional server state snapshot. Will be used during initial hydration render
32
+
* if available, to ensure that the UI output is consistent with the HTML generated on the server.
33
+
* New in 8.0
34
+
*/
35
+
serverState?:S
36
+
37
+
/**
38
+
* Optional context to be used internally in react-redux. Use React.createContext()
39
+
* to create a context to be used.
40
+
* If this is used, you'll need to customize `connect` by supplying the same
41
+
* context provided to the Provider.
42
+
* Initial value doesn't matter, as it is overwritten with the internal state of Provider.
43
+
*/
44
+
context?:Context<ReactReduxContextValue<S, A>>
45
+
46
+
/** The top-level React elements in your component tree, such as `<App />` **/
47
+
children:ReactNode
48
+
}
49
+
```
25
50
26
-
`children` (ReactElement)
27
-
The root of your component hierarchy.
51
+
Typically, you only need to pass `<Provider store={store}>`.
28
52
29
-
`context`
30
-
You may provide a context instance. If you do so, you will need to provide the same context instance to all of your connected components as well. Failure to provide the correct context results in runtime error:
53
+
You may provide a context instance. If you do so, you will need to provide the same context instance to all of your connected components as well. Failure to provide the correct context results in this runtime error:
31
54
32
55
> Invariant Violation
33
56
>
34
57
> Could not find "store" in the context of "Connect(MyComponent)". Either wrap the root component in a `<Provider>`, or pass a custom React context provider to `<Provider>` and the corresponding React context consumer to Connect(Todo) in connect options.
35
58
36
-
### Example Usage
59
+
## React 18 SSR Usage
60
+
61
+
As of React-Redux v8, `<Provider>` now accepts a `serverState` prop for use in SSR hydration scenarios. This is necessary if you are calling `hydrateRoot` in order to avoid hydration mismatches.
62
+
63
+
You should pass the entire serialized state from the server as the `serverState` prop, and React will use this state for the initial hydration render. After that, it will apply any updates from changes that occurred on the client during the setup process.
64
+
65
+
## Examples
66
+
67
+
### Basic Usage
37
68
38
69
In the example below, the `<App />` component is our root-level component. This means it’s at the very top of our component hierarchy.
39
70
@@ -47,10 +78,35 @@ import createStore from './createReduxStore'
In this example, the client has received HTML rendered by the server, as well as a serialized Redux state attached to `window`. The serialized state is used to both pre-fill the store's contents, _and_ passed as the `serverState` prop to `<Provider>`
**If you're using React 18, you do not need to use the `batch` API**. React 18 automatically batches _all_ state updates, no matter where they're queued.
22
+
23
+
:::
24
+
19
25
React's `unstable_batchedUpdates()` API allows any React updates in an event loop tick to be batched together into a single render pass. React already uses this internally for its own event handler callbacks. This API is actually part of the renderer packages like ReactDOM and React Native, not the React core itself.
20
26
21
27
Since React-Redux needs to work in both ReactDOM and React Native environments, we've taken care of importing this API from the correct renderer at build time for our own use. We also now re-export this function publicly ourselves, renamed to `batch()`. You can use it to ensure that multiple actions dispatched outside of React only result in a single render update, like this:
22
28
23
-
```js
29
+
```ts
24
30
import { batch } from'react-redux'
25
31
26
32
function myThunk() {
@@ -37,3 +43,4 @@ function myThunk() {
37
43
## References
38
44
39
45
-[`unstable_batchedUpdates()` API from React](https://github.com/facebook/react/commit/b41883fc708cd24d77dcaa767cde814b50b457fe)
46
+
-[React 18 Working Group: Automatic Batching for Fewer Renders in React 18](https://github.com/reactwg/react-18/discussions/21)
Assumes that the wrapped component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state.
234
-
235
-
When `options.pure` is true, `connect` performs several equality checks that are used to avoid unnecessary calls to `mapStateToProps`, `mapDispatchToProps`, `mergeProps`, and ultimately to `render`. These include `areStatesEqual`, `areOwnPropsEqual`, `areStatePropsEqual`, and `areMergedPropsEqual`. While the defaults are probably appropriate 99% of the time, you may wish to override them with custom implementations for performance or other reasons.
236
-
237
-
We provide a few examples in the following sections.
You may wish to override `areStatesEqual` if your `mapStateToProps` function is computationally expensive and is also only concerned with a small slice of your state. The example above will effectively ignore state changes for everything but that slice of state.
253
246
254
-
_Example 2_
255
-
256
-
If you have impure reducers that mutate your store state, you may wish to override `areStatesEqual` to always return false:
257
-
258
-
```js
259
-
constareStatesEqual= () =>false
260
-
```
261
-
262
247
This would likely impact the other equality checks as well, depending on your `mapStateToProps` function.
( returns `true` when each field of the objects is equal )
268
253
269
-
When pure, compares incoming props to its previous value.
254
+
Compares incoming props to its previous value.
270
255
271
256
You may wish to override `areOwnPropsEqual` as a way to whitelist incoming props. You'd also have to implement `mapStateToProps`, `mapDispatchToProps` and `mergeProps` to also whitelist props. (It may be simpler to achieve this other ways, for example by using [recompose's mapProps](https://github.com/acdlite/recompose/blob/master/docs/API.md#mapprops).)
272
257
@@ -275,13 +260,13 @@ You may wish to override `areOwnPropsEqual` as a way to whitelist incoming props
275
260
- type: `function`
276
261
- default value: `shallowEqual`
277
262
278
-
When pure, compares the result of `mapStateToProps` to its previous value.
263
+
Compares the result of `mapStateToProps` to its previous value.
When pure, compares the result of `mergeProps` to its previous value.
269
+
Compares the result of `mergeProps` to its previous value.
285
270
286
271
You may wish to override `areStatePropsEqual` to use `strictEqual` if your `mapStateToProps` uses a memoized selector that will only return a new object if a relevant prop has changed. This would be a very slight performance improvement, since would avoid extra equality checks on individual props each time `mapStateToProps` is called.
0 commit comments