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/GettingStarted.md
+2-1Lines changed: 2 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,7 @@
1
1
---
2
2
id: getting-started
3
3
title: Getting started
4
+
hide_title: true
4
5
sidebar_label: Getting started
5
6
---
6
7
@@ -24,7 +25,7 @@ yarn add react-redux
24
25
25
26
<!-- perhaps add link to an extra quick start section? -->
26
27
27
-
## `<Provider />` and `connect`
28
+
## `Provider` and `connect`
28
29
29
30
React-Redux consists of two main pieces. The first is a component called `<Provider />`, which makes the Redux store available to the rest of your app:
Copy file name to clipboardExpand all lines: docs/api.md
+52-44Lines changed: 52 additions & 44 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,25 +2,26 @@
2
2
id: api
3
3
title: Api
4
4
sidebar_label: Api
5
+
hide_title: true
5
6
---
6
7
7
8
# API
8
9
9
10
<aid="provider"></a>
10
-
### `<Provider store>`
11
+
##Provider
11
12
12
13
Makes the Redux store available to the `connect()` calls in the component hierarchy below. Normally, you can’t use `connect()` without wrapping a parent or ancestor component in `<Provider>`.
13
14
14
15
If you *really* need to, you can manually pass `store` as a prop to every `connect()`ed component, but we only recommend to do this for stubbing `store` in unit tests, or in non-fully-React codebases. Normally, you should just use `<Provider>`.
15
16
16
-
####Props
17
+
### Props
17
18
18
19
*`store` (*[Redux Store](https://redux.js.org/api-reference/store)*): The single Redux store in your application.
19
20
*`children` (*ReactElement*) The root of your component hierarchy.
Connects a React component to a Redux store. `connect` is a facade around `connectAdvanced`, providing a convenient API for the most common use cases.
55
59
56
60
It does not modify the component class passed to it; instead, it *returns* a new, connected component class for you to use.
57
61
58
-
<aid="connect-arguments"></a>
59
-
#### Arguments
62
+
### Arguments
60
63
61
64
*[`mapStateToProps(state, [ownProps]): stateProps`]\(*Function*): If this argument is specified, the new component will subscribe to Redux store updates. This means that any time the store is updated, `mapStateToProps` will be called. The results of `mapStateToProps` must be a plain object, which will be merged into the component’s props. If you don't want to subscribe to store updates, pass `null` or `undefined` in place of `mapStateToProps`.
62
65
@@ -86,8 +89,7 @@ It does not modify the component class passed to it; instead, it *returns* a new
86
89
*[`areMergedPropsEqual`]*(Function)*: When pure, compares the result of `mergeProps` to its previous value. Default value: `shallowEqual`
87
90
*[`storeKey`]*(String)*: The key of the context from where to read the store. You probably only need this if you are in the inadvisable position of having multiple stores. Default value: `'store'`
88
91
89
-
<aid="connect-arguments-arity"></a>
90
-
##### The arity of mapStateToProps and mapDispatchToProps determines whether they receive ownProps
92
+
#### The arity of mapStateToProps and mapDispatchToProps determines whether they receive ownProps
91
93
92
94
> Note: `ownProps`**is not passed** to `mapStateToProps` and `mapDispatchToProps` if the formal definition of the function contains one mandatory parameter (function has length 1). For example, functions defined like below won't receive `ownProps` as the second argument.
##### Optimizing connect when options.pure is true
127
+
#### Optimizing connect when options.pure is true
127
128
128
129
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. Here are several examples:
129
130
@@ -137,28 +138,28 @@ When `options.pure` is true, `connect` performs several equality checks that are
137
138
138
139
* You may wish to override `areMergedPropsEqual` to implement a `deepEqual` if your selectors produce complex props. ex: nested objects, new arrays, etc. (The deep equal check should be faster than just re-rendering.)
139
140
140
-
####Returns
141
+
### Returns
141
142
142
143
A higher-order React component class that passes state and action creators into your component derived from the supplied arguments. This is created by `connectAdvanced`, and details of this higher-order component are covered there.
143
144
144
145
<aid="connect-examples"></a>
145
146
#### Examples
146
147
147
-
#####Inject just `dispatch` and don't listen to store
148
+
#### Inject just `dispatch` and don't listen to store
148
149
149
150
```js
150
151
exportdefaultconnect()(TodoApp)
151
152
```
152
153
153
-
#####Inject all action creators (`addTodo`, `completeTodo`, ...) without subscribing to the store
154
+
#### Inject all action creators (`addTodo`, `completeTodo`, ...) without subscribing to the store
Connects a React component to a Redux store. It is the base for `connect()` but is less opinionated about how to combine `state`, `props`, and `dispatch` into your final props. It makes no assumptions about defaults or memoization of results, leaving those responsibilities to the caller.
370
376
371
377
It does not modify the component class passed to it; instead, it *returns* a new, connected component class for you to use.
372
378
373
-
<aid="connectAdvanced-arguments"></a>
374
-
#### Arguments
379
+
### Arguments
375
380
376
381
*`selectorFactory(dispatch, factoryOptions): selector(state, ownProps): props`\(*Function*): Initializes a selector function (during each instance's constructor). That selector function is called any time the connector component needs to compute new props, as a result of a store state change or receiving new props. The result of `selector` is expected to be a plain object, which is passed as the props to the wrapped component. If a consecutive call to `selector` returns the same object (`===`) as its previous call, the component will not be re-rendered. It's the responsibility of `selector` to return that previous object when appropriate.
377
382
@@ -392,25 +397,26 @@ It does not modify the component class passed to it; instead, it *returns* a new
392
397
* Additionally, any extra options passed via `connectOptions` will be passed through to your `selectorFactory` in the `factoryOptions` argument.
393
398
394
399
<aid="connectAdvanced-returns"></a>
395
-
#### Returns
400
+
401
+
### Returns
396
402
397
403
A higher-order React component class that builds props from the store state and passes them to the wrapped component. A higher-order component is a function which accepts a component argument and returns a new component.
398
404
399
-
#####Static Properties
405
+
#### Static Properties
400
406
401
407
*`WrappedComponent`*(Component)*: The original component class passed to `connectAdvanced(...)(Component)`.
402
408
403
-
#####Static Methods
409
+
#### Static Methods
404
410
405
411
All the original static methods of the component are hoisted.
406
412
407
-
#####Instance Methods
413
+
#### Instance Methods
408
414
409
-
######`getWrappedInstance(): ReactComponent`
415
+
##### `getWrappedInstance(): ReactComponent`
410
416
411
417
Returns the wrapped component instance. Only available if you pass `{ withRef: true }` as part of the `options` argument.
412
418
413
-
####Remarks
419
+
### Remarks
414
420
415
421
* Since `connectAdvanced` returns a higher-order component, it needs to be invoked two times. The first time with its arguments as described above, and a second time, with the component: `connectAdvanced(selectorFactory)(MyComponent)`.
416
422
@@ -419,7 +425,7 @@ Returns the wrapped component instance. Only available if you pass `{ withRef: t
419
425
<aid="connectAdvanced-examples"></a>
420
426
#### Examples
421
427
422
-
#####Inject `todos` of a specific user depending on props, and inject `props.userId` into the action
428
+
#### Inject `todos` of a specific user depending on props, and inject `props.userId` into the action
423
429
```js
424
430
import*asactionCreatorsfrom'./actionCreators'
425
431
import { bindActionCreators } from'redux'
@@ -440,17 +446,19 @@ function selectorFactory(dispatch) {
Creates a new `<Provider>` which will set the Redux Store on the passed key of the context. You probably only need this if you are in the inadvisable position of having multiple stores. You will also need to pass the same `storeKey` to the `options` argument of [`connect`](#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)
447
456
448
-
<aid="createProvider-arguments"></a>
449
-
#### Arguments
457
+
### Arguments
450
458
451
459
*[`storeKey`] (*String*): The key of the context on which to set the store. Default value: `'store'`
452
460
453
-
####Examples
461
+
### Examples
454
462
Before creating multiple stores, please go through this FAQ: [Can or should I create multiple stores?](http://redux.js.org/docs/faq/StoreSetup.html#can-or-should-i-create-multiple-stores-can-i-import-my-store-directly-and-use-it-in-components-myself)
0 commit comments