Skip to content

Commit 2e4465a

Browse files
BTMPLmarkerikson
authored andcommitted
Remove duplicated page titles, fix sidebar menu (#1033)
1 parent 9cbdc69 commit 2e4465a

File tree

4 files changed

+63
-45
lines changed

4 files changed

+63
-45
lines changed

docs/GettingStarted.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
id: getting-started
33
title: Getting started
4+
hide_title: true
45
sidebar_label: Getting started
56
---
67

@@ -24,7 +25,7 @@ yarn add react-redux
2425

2526
<!-- perhaps add link to an extra quick start section? -->
2627

27-
## `<Provider />` and `connect`
28+
## `Provider` and `connect`
2829

2930
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:
3031

docs/api.md

Lines changed: 52 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,26 @@
22
id: api
33
title: Api
44
sidebar_label: Api
5+
hide_title: true
56
---
67

78
# API
89

910
<a id="provider"></a>
10-
### `<Provider store>`
11+
## Provider
1112

1213
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>`.
1314

1415
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>`.
1516

16-
#### Props
17+
### Props
1718

1819
* `store` (*[Redux Store](https://redux.js.org/api-reference/store)*): The single Redux store in your application.
1920
* `children` (*ReactElement*) The root of your component hierarchy.
2021

21-
#### Example
22+
### Example
2223

23-
##### Vanilla React
24+
#### Vanilla React
2425

2526
```js
2627
ReactDOM.render(
@@ -31,7 +32,7 @@ ReactDOM.render(
3132
)
3233
```
3334

34-
##### React Router
35+
#### React Router
3536

3637
```js
3738
ReactDOM.render(
@@ -48,15 +49,17 @@ ReactDOM.render(
4849
```
4950

5051

51-
<a id="connect"></a>
52-
### `connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`
52+
## connect
53+
54+
```
55+
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
56+
```
5357

5458
Connects a React component to a Redux store. `connect` is a facade around `connectAdvanced`, providing a convenient API for the most common use cases.
5559

5660
It does not modify the component class passed to it; instead, it *returns* a new, connected component class for you to use.
5761

58-
<a id="connect-arguments"></a>
59-
#### Arguments
62+
### Arguments
6063

6164
* [`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`.
6265

@@ -86,8 +89,7 @@ It does not modify the component class passed to it; instead, it *returns* a new
8689
* [`areMergedPropsEqual`] *(Function)*: When pure, compares the result of `mergeProps` to its previous value. Default value: `shallowEqual`
8790
* [`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'`
8891

89-
<a id="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
9193

9294
> 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.
9395
```javascript
@@ -122,8 +124,7 @@ const mapStateToProps = (...args) => {
122124
}
123125
```
124126

125-
<a id="connect-optimizing"></a>
126-
##### Optimizing connect when options.pure is true
127+
#### Optimizing connect when options.pure is true
127128

128129
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:
129130

@@ -137,28 +138,28 @@ When `options.pure` is true, `connect` performs several equality checks that are
137138

138139
* 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.)
139140

140-
#### Returns
141+
### Returns
141142

142143
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.
143144

144145
<a id="connect-examples"></a>
145146
#### Examples
146147

147-
##### Inject just `dispatch` and don't listen to store
148+
#### Inject just `dispatch` and don't listen to store
148149

149150
```js
150151
export default connect()(TodoApp)
151152
```
152153

153-
##### Inject all action creators (`addTodo`, `completeTodo`, ...) without subscribing to the store
154+
#### Inject all action creators (`addTodo`, `completeTodo`, ...) without subscribing to the store
154155

155156
```js
156157
import * as actionCreators from './actionCreators'
157158

158159
export default connect(null, actionCreators)(TodoApp)
159160
```
160161

161-
##### Inject `dispatch` and every field in the global state
162+
#### Inject `dispatch` and every field in the global state
162163

163164
>Don’t do this! It kills any performance optimizations because `TodoApp` will rerender after every state change.
164165
>It’s better to have more granular `connect()` on several components in your view hierarchy that each only
@@ -168,7 +169,7 @@ export default connect(null, actionCreators)(TodoApp)
168169
export default connect(state => state)(TodoApp)
169170
```
170171

171-
##### Inject `dispatch` and `todos`
172+
#### Inject `dispatch` and `todos`
172173

173174
```js
174175
function mapStateToProps(state) {
@@ -178,7 +179,7 @@ function mapStateToProps(state) {
178179
export default connect(mapStateToProps)(TodoApp)
179180
```
180181

181-
##### Inject `todos` and all action creators
182+
#### Inject `todos` and all action creators
182183

183184
```js
184185
import * as actionCreators from './actionCreators'
@@ -190,7 +191,7 @@ function mapStateToProps(state) {
190191
export default connect(mapStateToProps, actionCreators)(TodoApp)
191192
```
192193

193-
##### Inject `todos` and all action creators (`addTodo`, `completeTodo`, ...) as `actions`
194+
#### Inject `todos` and all action creators (`addTodo`, `completeTodo`, ...) as `actions`
194195

195196
```js
196197
import * as actionCreators from './actionCreators'
@@ -207,7 +208,7 @@ function mapDispatchToProps(dispatch) {
207208
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
208209
```
209210

210-
##### Inject `todos` and a specific action creator (`addTodo`)
211+
#### Inject `todos` and a specific action creator (`addTodo`)
211212

212213
```js
213214
import { addTodo } from './actionCreators'
@@ -224,7 +225,8 @@ function mapDispatchToProps(dispatch) {
224225
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
225226
```
226227

227-
##### Inject `todos` and specific action creators (`addTodo` and `deleteTodo`) with shorthand syntax
228+
#### Inject `todos` and specific action creators (`addTodo` and `deleteTodo`) with shorthand syntax
229+
228230
```js
229231
import { addTodo, deleteTodo } from './actionCreators'
230232

@@ -240,7 +242,7 @@ const mapDispatchToProps = {
240242
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
241243
```
242244

243-
##### Inject `todos`, todoActionCreators as `todoActions`, and counterActionCreators as `counterActions`
245+
#### Inject `todos`, todoActionCreators as `todoActions`, and counterActionCreators as `counterActions`
244246

245247
```js
246248
import * as todoActionCreators from './todoActionCreators'
@@ -261,7 +263,7 @@ function mapDispatchToProps(dispatch) {
261263
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
262264
```
263265

264-
##### Inject `todos`, and todoActionCreators and counterActionCreators together as `actions`
266+
#### Inject `todos`, and todoActionCreators and counterActionCreators together as `actions`
265267

266268
```js
267269
import * as todoActionCreators from './todoActionCreators'
@@ -281,7 +283,7 @@ function mapDispatchToProps(dispatch) {
281283
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
282284
```
283285

284-
##### Inject `todos`, and all todoActionCreators and counterActionCreators directly as props
286+
#### Inject `todos`, and all todoActionCreators and counterActionCreators directly as props
285287

286288
```js
287289
import * as todoActionCreators from './todoActionCreators'
@@ -299,7 +301,7 @@ function mapDispatchToProps(dispatch) {
299301
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
300302
```
301303

302-
##### Inject `todos` of a specific user depending on props
304+
#### Inject `todos` of a specific user depending on props
303305

304306
```js
305307
import * as actionCreators from './actionCreators'
@@ -311,7 +313,7 @@ function mapStateToProps(state, ownProps) {
311313
export default connect(mapStateToProps)(TodoApp)
312314
```
313315

314-
##### Inject `todos` of a specific user depending on props, and inject `props.userId` into the action
316+
#### Inject `todos` of a specific user depending on props, and inject `props.userId` into the action
315317

316318
```js
317319
import * as actionCreators from './actionCreators'
@@ -330,7 +332,8 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
330332
export default connect(mapStateToProps, actionCreators, mergeProps)(TodoApp)
331333
```
332334

333-
##### Factory functions
335+
#### Factory functions
336+
334337
Factory functions can be used for performance optimizations
335338

336339
```js
@@ -363,15 +366,17 @@ function mapDispatchToPropsFactory(initialState, initialProps) {
363366
export default connect(mapStateToPropsFactory, mapDispatchToPropsFactory)(TodoApp)
364367
```
365368

366-
<a id="connectAdvanced"></a>
367-
### `connectAdvanced(selectorFactory, [connectOptions])`
369+
## connectAdvanced
370+
371+
```
372+
connectAdvanced(selectorFactory, [connectOptions])
373+
```
368374

369375
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.
370376

371377
It does not modify the component class passed to it; instead, it *returns* a new, connected component class for you to use.
372378

373-
<a id="connectAdvanced-arguments"></a>
374-
#### Arguments
379+
### Arguments
375380

376381
* `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.
377382

@@ -392,25 +397,26 @@ It does not modify the component class passed to it; instead, it *returns* a new
392397
* Additionally, any extra options passed via `connectOptions` will be passed through to your `selectorFactory` in the `factoryOptions` argument.
393398

394399
<a id="connectAdvanced-returns"></a>
395-
#### Returns
400+
401+
### Returns
396402

397403
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.
398404

399-
##### Static Properties
405+
#### Static Properties
400406

401407
* `WrappedComponent` *(Component)*: The original component class passed to `connectAdvanced(...)(Component)`.
402408

403-
##### Static Methods
409+
#### Static Methods
404410

405411
All the original static methods of the component are hoisted.
406412

407-
##### Instance Methods
413+
#### Instance Methods
408414

409-
###### `getWrappedInstance(): ReactComponent`
415+
##### `getWrappedInstance(): ReactComponent`
410416

411417
Returns the wrapped component instance. Only available if you pass `{ withRef: true }` as part of the `options` argument.
412418

413-
#### Remarks
419+
### Remarks
414420

415421
* 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)`.
416422

@@ -419,7 +425,7 @@ Returns the wrapped component instance. Only available if you pass `{ withRef: t
419425
<a id="connectAdvanced-examples"></a>
420426
#### Examples
421427

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
423429
```js
424430
import * as actionCreators from './actionCreators'
425431
import { bindActionCreators } from 'redux'
@@ -440,17 +446,19 @@ function selectorFactory(dispatch) {
440446
export default connectAdvanced(selectorFactory)(TodoApp)
441447
```
442448

443-
<a id="createProvider"></a>
444-
### `createProvider([storeKey])`
449+
## createProvider
450+
451+
```
452+
createProvider([storeKey])
453+
```
445454

446455
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)
447456

448-
<a id="createProvider-arguments"></a>
449-
#### Arguments
457+
### Arguments
450458

451459
* [`storeKey`] (*String*): The key of the context on which to set the store. Default value: `'store'`
452460

453-
#### Examples
461+
### Examples
454462
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)
455463

456464
```js

docs/troubleshooting.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
id: troubleshooting
33
title: Troubleshooting
44
sidebar_label: Troubleshooting
5+
hide_title: true
56
---
67

78
## Troubleshooting

website/static/css/custom.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
/* your custom css */
22

3+
header.postHeader:empty {
4+
display: none;
5+
}
6+
7+
header.postHeader:empty + article h1 {
8+
margin-top: 0;
9+
}
10+
311
@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
412
}
513

0 commit comments

Comments
 (0)