Skip to content

Commit a726579

Browse files
wgao19wgao19
committed
Rename 5.1.1 to 5.x and make it work
1 parent 97a7e79 commit a726579

16 files changed

+217
-651
lines changed

‎website/siteConfig.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ const siteConfig = {
9898
// template. For example, if you need your repo's URL...
9999
repoUrl: "https://github.com/reduxjs/react-redux",
100100

101-
nextVersion: "6.0.0",
101+
// nextVersion: "6.0.0",
102102

103103
gaTrackingId : "UA-130598673-2",
104104
};

‎website/versioned_docs/version-5.1.1/api/api.md

Lines changed: 0 additions & 492 deletions
This file was deleted.

‎website/versioned_docs/version-5.1.1/api.md renamed to ‎website/versioned_docs/version-5.x/api.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
id: version-5.1.1-api
2+
id: version-5.x-api
33
title: Api
44
sidebar_label: API
55
hide_title: true

‎website/versioned_docs/version-5.1.1/api/Provider.md renamed to ‎website/versioned_docs/version-5.x/api/Provider.md

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
id: version-5.1.1-provider
2+
id: version-5.x-provider
33
title: Provider
44
sidebar_label: Provider
55
original_id: provider
@@ -78,3 +78,44 @@ In the example below, the `<App />` component is our root-level component. This
7878
document.getElementById('root')
7979
)
8080
```
81+
82+
## createProvider
83+
84+
```js
85+
createProvider([storeKey])
86+
```
87+
88+
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)
89+
90+
### Arguments
91+
92+
* [`storeKey`] (*String*): The key of the context on which to set the store. Default value: `'store'`
93+
94+
### Examples
95+
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)
96+
97+
```js
98+
import {connect, createProvider} from 'react-redux'
99+
100+
const STORE_KEY = 'componentStore'
101+
102+
export const Provider = createProvider(STORE_KEY)
103+
104+
function connectExtended(
105+
mapStateToProps,
106+
mapDispatchToProps,
107+
mergeProps,
108+
options = {}
109+
) {
110+
options.storeKey = STORE_KEY
111+
return connect(
112+
mapStateToProps,
113+
mapDispatchToProps,
114+
mergeProps,
115+
options
116+
)
117+
}
118+
119+
export {connectExtended as connect}
120+
```
121+
Now you can import the above `Provider` and `connect` and use them.

‎website/versioned_docs/version-5.x/api/api.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
id: version-5.x-api
3+
title: Api
4+
sidebar_label: API
5+
hide_title: true
6+
original_id: api
7+
---
8+
9+
# API
10+
11+
<a id="provider"></a>
12+
## Provider
13+
14+
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>`.
15+
16+
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>`.
17+
18+
### Props
19+
20+
* `store` (*[Redux Store](https://redux.js.org/api-reference/store)*): The single Redux store in your application.
21+
* `children` (*ReactElement*) The root of your component hierarchy.
22+
23+
### Example
24+
25+
#### Vanilla React
26+
27+
```jsx
28+
ReactDOM.render(
29+
<Provider store={store}>
30+
<MyRootComponent />
31+
</Provider>,
32+
rootEl
33+
)
34+
```
35+
36+
#### React Router
37+
38+
```jsx
39+
ReactDOM.render(
40+
<Provider store={store}>
41+
<Router history={history}>
42+
<Route path="/" component={App}>
43+
<Route path="foo" component={Foo}/>
44+
<Route path="bar" component={Bar}/>
45+
</Route>
46+
</Router>
47+
</Provider>,
48+
document.getElementById('root')
49+
)
50+
```
51+

‎website/versioned_docs/version-5.x/api/connect-advanced.md

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
id: version-5.x-connect-advanced
3+
title: connectAdvanced
4+
sidebar_label: connectAdvanced()
5+
hide_title: true
6+
original_id: connect-advanced
7+
---
8+
9+
## connectAdvanced
10+
11+
```js
12+
connectAdvanced(selectorFactory, [connectOptions])
13+
```
14+
15+
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.
16+
17+
It does not modify the component class passed to it; instead, it *returns* a new, connected component class for you to use.
18+
19+
### Arguments
20+
21+
* `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.
22+
23+
* [`connectOptions`] *(Object)* If specified, further customizes the behavior of the connector.
24+
25+
* [`getDisplayName`] *(Function)*: computes the connector component's displayName property relative to that of the wrapped component. Usually overridden by wrapper functions. Default value: `name => 'ConnectAdvanced('+name+')'`
26+
27+
* [`methodName`] *(String)*: shown in error messages. Usually overridden by wrapper functions. Default value: `'connectAdvanced'`
28+
29+
* [`renderCountProp`] *(String)*: if defined, a property named this value will be added to the props passed to the wrapped component. Its value will be the number of times the component has been rendered, which can be useful for tracking down unnecessary re-renders. Default value: `undefined`
30+
31+
* [`shouldHandleStateChanges`] *(Boolean)*: controls whether the connector component subscribes to redux store state changes. If set to false, it will only re-render when parent component re-renders. Default value: `true`
32+
33+
* [`storeKey`] *(String)*: the key of props/context to get the store. You probably only need this if you are in the inadvisable position of having multiple stores. Default value: `'store'`
34+
35+
* [`withRef`] *(Boolean)*: If true, stores a ref to the wrapped component instance and makes it available via `getWrappedInstance()` method. Default value: `false`
36+
37+
* Additionally, any extra options passed via `connectOptions` will be passed through to your `selectorFactory` in the `factoryOptions` argument.
38+
39+
<a id="connectAdvanced-returns"></a>
40+
41+
### Returns
42+
43+
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.
44+
45+
#### Static Properties
46+
47+
* `WrappedComponent` *(Component)*: The original component class passed to `connectAdvanced(...)(Component)`.
48+
49+
#### Static Methods
50+
51+
All the original static methods of the component are hoisted.
52+
53+
#### Instance Methods
54+
55+
##### `getWrappedInstance(): ReactComponent`
56+
57+
Returns the wrapped component instance. Only available if you pass `{ withRef: true }` as part of the `options` argument.
58+
59+
### Remarks
60+
61+
* 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)`.
62+
63+
* `connectAdvanced` does not modify the passed React component. It returns a new, connected component, that you should use instead.
64+
65+
<a id="connectAdvanced-examples"></a>
66+
#### Examples
67+
68+
#### Inject `todos` of a specific user depending on props, and inject `props.userId` into the action
69+
70+
```js
71+
import * as actionCreators from './actionCreators'
72+
import { bindActionCreators } from 'redux'
73+
74+
function selectorFactory(dispatch) {
75+
let ownProps = {}
76+
let result = {}
77+
const actions = bindActionCreators(actionCreators, dispatch)
78+
const addTodo = (text) => actions.addTodo(ownProps.userId, text)
79+
return (nextState, nextOwnProps) => {
80+
const todos = nextState.todos[nextOwnProps.userId]
81+
const nextResult = { ...nextOwnProps, todos, addTodo }
82+
ownProps = nextOwnProps
83+
if (!shallowEqual(result, nextResult)) result = nextResult
84+
return result
85+
}
86+
}
87+
export default connectAdvanced(selectorFactory)(TodoApp)
88+
```

‎website/versioned_docs/version-6.0.0/api.md renamed to ‎website/versioned_docs/version-5.x/api/connect.md

Lines changed: 5 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,10 @@
11
---
2-
id: version-6.0.0-api
3-
title: Api
4-
sidebar_label: API
5-
hide_title: true
6-
original_id: api
2+
id: version-5.x-connect
3+
title: Connect
4+
sidebar_label: connect()
5+
original_id: connect
76
---
87

9-
# API
10-
11-
<a id="provider"></a>
12-
## Provider
13-
14-
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>`.
15-
16-
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>`.
17-
18-
### Props
19-
20-
* `store` (*[Redux Store](https://redux.js.org/api-reference/store)*): The single Redux store in your application.
21-
* `children` (*ReactElement*) The root of your component hierarchy.
22-
23-
### Example
24-
25-
#### Vanilla React
26-
27-
```jsx
28-
ReactDOM.render(
29-
<Provider store={store}>
30-
<MyRootComponent />
31-
</Provider>,
32-
rootEl
33-
)
34-
```
35-
36-
#### React Router
37-
38-
```jsx
39-
ReactDOM.render(
40-
<Provider store={store}>
41-
<Router history={history}>
42-
<Route path="/" component={App}>
43-
<Route path="foo" component={Foo}/>
44-
<Route path="bar" component={Bar}/>
45-
</Route>
46-
</Router>
47-
</Provider>,
48-
document.getElementById('root')
49-
)
50-
```
51-
52-
538
## connect
549

5510
```
@@ -88,6 +43,7 @@ It does not modify the component class passed to it; instead, it *returns* a new
8843
* [`areOwnPropsEqual`] *(Function)*: When pure, compares incoming props to its previous value. Default value: `shallowEqual`
8944
* [`areStatePropsEqual`] *(Function)*: When pure, compares the result of `mapStateToProps` to its previous value. Default value: `shallowEqual`
9045
* [`areMergedPropsEqual`] *(Function)*: When pure, compares the result of `mergeProps` to its previous value. Default value: `shallowEqual`
46+
* [`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'`
9147

9248
#### The arity of mapStateToProps and mapDispatchToProps determines whether they receive ownProps
9349

@@ -367,82 +323,3 @@ function mapDispatchToPropsFactory(initialState, initialProps) {
367323

368324
export default connect(mapStateToPropsFactory, mapDispatchToPropsFactory)(TodoApp)
369325
```
370-
371-
## connectAdvanced
372-
373-
```js
374-
connectAdvanced(selectorFactory, [connectOptions])
375-
```
376-
377-
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.
378-
379-
It does not modify the component class passed to it; instead, it *returns* a new, connected component class for you to use.
380-
381-
### Arguments
382-
383-
* `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.
384-
385-
* [`connectOptions`] *(Object)* If specified, further customizes the behavior of the connector.
386-
387-
* [`getDisplayName`] *(Function)*: computes the connector component's displayName property relative to that of the wrapped component. Usually overridden by wrapper functions. Default value: `name => 'ConnectAdvanced('+name+')'`
388-
389-
* [`methodName`] *(String)*: shown in error messages. Usually overridden by wrapper functions. Default value: `'connectAdvanced'`
390-
391-
* [`renderCountProp`] *(String)*: if defined, a property named this value will be added to the props passed to the wrapped component. Its value will be the number of times the component has been rendered, which can be useful for tracking down unnecessary re-renders. Default value: `undefined`
392-
393-
* [`shouldHandleStateChanges`] *(Boolean)*: controls whether the connector component subscribes to redux store state changes. If set to false, it will only re-render when parent component re-renders. Default value: `true`
394-
395-
* [`forwardRef`] *(Boolean)*: If true, stores a ref to the wrapped component instance and makes it available via `getWrappedInstance()` method. Default value: `false`
396-
397-
* Additionally, any extra options passed via `connectOptions` will be passed through to your `selectorFactory` in the `factoryOptions` argument.
398-
399-
<a id="connectAdvanced-returns"></a>
400-
401-
### Returns
402-
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.
404-
405-
#### Static Properties
406-
407-
* `WrappedComponent` *(Component)*: The original component class passed to `connectAdvanced(...)(Component)`.
408-
409-
#### Static Methods
410-
411-
All the original static methods of the component are hoisted.
412-
413-
#### Instance Methods
414-
415-
##### `getWrappedInstance(): ReactComponent`
416-
417-
Returns the wrapped component instance. Only available if you pass `{ forwardRef: true }` as part of the `options` argument.
418-
419-
### Remarks
420-
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)`.
422-
423-
* `connectAdvanced` does not modify the passed React component. It returns a new, connected component, that you should use instead.
424-
425-
<a id="connectAdvanced-examples"></a>
426-
#### Examples
427-
428-
#### Inject `todos` of a specific user depending on props, and inject `props.userId` into the action
429-
430-
```js
431-
import * as actionCreators from './actionCreators'
432-
import { bindActionCreators } from 'redux'
433-
434-
function selectorFactory(dispatch) {
435-
let ownProps = {}
436-
let result = {}
437-
const actions = bindActionCreators(actionCreators, dispatch)
438-
const addTodo = (text) => actions.addTodo(ownProps.userId, text)
439-
return (nextState, nextOwnProps) => {
440-
const todos = nextState.todos[nextOwnProps.userId]
441-
const nextResult = { ...nextOwnProps, todos, addTodo }
442-
ownProps = nextOwnProps
443-
if (!shallowEqual(result, nextResult)) result = nextResult
444-
return result
445-
}
446-
}
447-
export default connectAdvanced(selectorFactory)(TodoApp)
448-
```

‎website/versioned_docs/version-5.1.1/introduction/basic-tutorial.md renamed to ‎website/versioned_docs/version-5.x/introduction/basic-tutorial.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
id: version-5.1.1-basic-tutorial
2+
id: version-5.x-basic-tutorial
33
title: Basic Tutorial
44
hide_title: true
55
sidebar_label: Basic Tutorial

‎website/versioned_docs/version-5.1.1/introduction/quick-start.md renamed to ‎website/versioned_docs/version-5.x/introduction/quick-start.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
id: version-5.1.1-quick-start
2+
id: version-5.x-quick-start
33
title: Quick Start
44
hide_title: true
55
sidebar_label: Quick Start

‎website/versioned_docs/version-5.1.1/introduction/why-use-react-redux.md renamed to ‎website/versioned_docs/version-5.x/introduction/why-use-react-redux.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
id: version-5.1.1-why-use-react-redux
2+
id: version-5.x-why-use-react-redux
33
title: Why Use React-Redux?
44
hide_title: true
55
sidebar_label: Why Use React-Redux?

‎website/versioned_docs/version-5.1.1/troubleshooting.md renamed to ‎website/versioned_docs/version-5.x/troubleshooting.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
id: version-5.1.1-troubleshooting
2+
id: version-5.x-troubleshooting
33
title: Troubleshooting
44
sidebar_label: Troubleshooting
55
hide_title: true

‎website/versioned_docs/version-5.1.1/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md renamed to ‎website/versioned_docs/version-5.x/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
id: version-5.1.1-connect-mapdispatch
2+
id: version-5.x-connect-mapdispatch
33
title: Connect: Dispatching Actions with mapDispatchToProps
44
hide_title: true
55
sidebar_label: Connect: Dispatching Actions with mapDispatchToProps

0 commit comments

Comments
 (0)