Skip to content

Commit ac3ec66

Browse files
author
Dallon Feldner
committed
Documented pure: false option
1 parent 389e57e commit ac3ec66

File tree

1 file changed

+30
-2
lines changed

1 file changed

+30
-2
lines changed

README.md

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Performant and flexible.
1515
- [Quick Start](#quick-start)
1616
- [API](#api)
1717
- [`<Provider store>`](#provider-store)
18-
- [`connect([mapStateToProps], [mapDispatchToProps], [mergeProps])`](#connectmapstatetoprops-mapdispatchtoprops-mergeprops)
18+
- [`connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`](#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)
1919
- [Troubleshooting](#troubleshooting)
2020
- [License](#license)
2121

@@ -226,7 +226,7 @@ React.render(
226226
);
227227
```
228228

229-
### `connect([mapStateToProps], [mapDispatchToProps], [mergeProps])`
229+
### `connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`
230230

231231
Connects a React component to a Redux store.
232232

@@ -241,6 +241,10 @@ Instead, it *returns* a new, connected component class, for you to use.
241241

242242
* [`mergeProps(stateProps, dispatchProps, ownProps): props`] \(*Function*): If specified, it is passed the result of `mapStateToProps()`, `mapDispatchToProps()`, and the parent `props`. The plain object you return from it will be passed as props to the wrapped component. You may specify this function to select a slice of the state based on props, or to bind action creators to a particular variable from props. If you omit it, `Object.assign({}, ownProps, stateProps, dispatchProps)` is used by default.
243243

244+
* [`options`] *(Object)* If specified, further customizes the behavior of the connector.
245+
246+
* [`pure`] *(Boolean)*: If true, implements `shouldComponentUpdate` and shallowly compares the result of `mergeProps`, preventing unnecessary updates, assuming that the component is a "pure" component and does not rely on any input or state other than its props and the Redux store. *Defaults to `true`.*
247+
244248
#### Returns
245249

246250
A React component class that injects state and action creators into your component according to the specified options.
@@ -460,6 +464,30 @@ render() {
460464
Conveniently, this gives your components access to the router state!
461465
You can also upgrade to React Router 1.0 which shouldn’t have this problem. (Let us know if it does!)
462466

467+
### My views aren't updating when something changes outside of Redux
468+
469+
If your views depend on global state or context, you might find that views decorated with `connect()` will fail to update.
470+
471+
> This is because `connect()` implements [shouldComponentUpdate](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) by default, assuming that your component will produce the same results given the same props and state. This is a similar concept to React's [PureRenderMixin](https://facebook.github.io/react/docs/pure-render-mixin.html).
472+
473+
The _best_ solution to this is to make your components pure and pass any external state to them via props. This will ensure that your views do not re-render unless they actually need to re-render and will greatly speed up your application.
474+
475+
If that's not practical for whatever reason (for example, if you're using a library that depends heavily on Context), you can pass the `pure: false` option to `connect()`:
476+
477+
```
478+
function mapStateToProps(state) {
479+
return { todos: state.todos };
480+
}
481+
482+
const options = {
483+
pure: false
484+
};
485+
486+
export default connect(mapStateToProps, null, null, options)(TodoApp);
487+
```
488+
489+
This will remove the assumption that `TodoApp` is pure and cause it to update whenever its parent component renders.
490+
463491
### Could not find "store" in either the context or props
464492

465493
If you have context issues,

0 commit comments

Comments
 (0)