Skip to content

Commit

Permalink
Merge branch 'master' into feat/create-hooks-api
Browse files Browse the repository at this point in the history
  • Loading branch information
timdorr committed Jul 17, 2019
2 parents e9631ae + c83ae48 commit ae4c0ca
Show file tree
Hide file tree
Showing 13 changed files with 60 additions and 32 deletions.
4 changes: 2 additions & 2 deletions docs/api/batch.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ hide_title: true
batch(fn: Function)
```

React's `unstable_batchedUpdate()` 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.
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.

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:

Expand All @@ -31,4 +31,4 @@ function myThunk() {

## References

- [`unstable_batchedUpdate()` API from React](https://github.com/facebook/react/commit/b41883fc708cd24d77dcaa767cde814b50b457fe)
- [`unstable_batchedUpdates()` API from React](https://github.com/facebook/react/commit/b41883fc708cd24d77dcaa767cde814b50b457fe)
8 changes: 4 additions & 4 deletions docs/api/hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ The selector is approximately equivalent to the [`mapStateToProps` argument to `
However, there are some differences between the selectors passed to `useSelector()` and a `mapState` function:

- The selector may return any value as a result, not just an object. The return value of the selector will be used as the return value of the `useSelector()` hook.
- When an action is dispatched, `useSelector()` will do a shallow comparison of the previous selector result value and the current result value. If they are different, the component will be forced to re-render. If they are the same, they component will not re-render.
- When an action is dispatched, `useSelector()` will do a reference comparison of the previous selector result value and the current result value. If they are different, the component will be forced to re-render. If they are the same, the component will not re-render.
- The selector function does _not_ receive an `ownProps` argument. However, props can be used through closure (see the examples below) or by using a curried selector.
- Extra care must be taken when using memoizing selectors (see examples below for more details).
- `useSelector()` uses strict `===` reference equality checks by default, not shallow equality (see the following section for more details).
Expand Down Expand Up @@ -171,7 +171,7 @@ export const App = () => {
}
```

However, when the selector is used in multiple component instances and depends on the component's props, you need to ensure that each component instance gets its own selector instance (see [here](https://github.com/reduxjs/reselect#accessing-react-props-in-selectors) for a more thourough explanation of why this is necessary):
However, when the selector is used in multiple component instances and depends on the component's props, you need to ensure that each component instance gets its own selector instance (see [here](https://github.com/reduxjs/reselect#accessing-react-props-in-selectors) for a more thorough explanation of why this is necessary):

```jsx
import React, { useMemo } from 'react'
Expand Down Expand Up @@ -415,14 +415,14 @@ export function useActions(actions, deps) {
return actions.map(a => bindActionCreators(a, dispatch))
}
return bindActionCreators(actions, dispatch)
}, deps ? [dispatch, ...deps] : deps)
}, deps ? [dispatch, ...deps] : [dispatch])
}
```

### Recipe: `useShallowEqualSelector()`

```js
import { shallowEqual } from 'react-redux'
import { useSelector, shallowEqual } from 'react-redux'

export function useShallowEqualSelector(selector) {
return useSelector(selector, shallowEqual)
Expand Down
2 changes: 1 addition & 1 deletion docs/introduction/quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ sidebar_label: Quick Start

## Installation

React Redux 6.x requires **React 16.4 or later.**
React Redux 7.1 requires **React 16.8.3 or later.**

To use React Redux with your React app:

Expand Down
51 changes: 42 additions & 9 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@testing-library/react": "^8.0.1",
"@testing-library/react-hooks": "^1.1.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"codecov": "^3.5.0",
Expand All @@ -74,7 +75,6 @@
"prettier": "^1.18.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-hooks-testing-library": "^0.5.1",
"react-test-renderer": "^16.8.6",
"redux": "^4.0.1",
"rimraf": "^2.6.3",
Expand Down
4 changes: 0 additions & 4 deletions src/components/Provider.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,6 @@ class Provider extends Component {
}

componentDidMount() {
this._isMounted = true

this.state.subscription.trySubscribe()

if (this.previousState !== this.props.store.getState()) {
Expand All @@ -35,8 +33,6 @@ class Provider extends Component {
if (this.unsubscribe) this.unsubscribe()

this.state.subscription.tryUnsubscribe()

this._isMounted = false
}

componentDidUpdate(prevProps) {
Expand Down
6 changes: 2 additions & 4 deletions src/hooks/useDispatch.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,14 @@ export function createDispatchHook(context = ReactReduxContext) {
}

/**
* A hook to access the redux `dispatch` function. Note that in most cases where you
* might want to use this hook it is recommended to use `useActions` instead to bind
* action creators to the `dispatch` function.
* A hook to access the redux `dispatch` function.
*
* @returns {any|function} redux store's `dispatch` function
*
* @example
*
* import React, { useCallback } from 'react'
* import { useReduxDispatch } from 'react-redux'
* import { useDispatch } from 'react-redux'
*
* export const CounterComponent = ({ value }) => {
* const dispatch = useDispatch()
Expand Down
2 changes: 1 addition & 1 deletion test/hooks/useDispatch.spec.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import { createStore } from 'redux'
import { renderHook } from 'react-hooks-testing-library'
import { renderHook } from '@testing-library/react-hooks'
import {
Provider as ProviderMock,
useDispatch,
Expand Down
2 changes: 1 addition & 1 deletion test/hooks/useReduxContext.spec.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { renderHook } from 'react-hooks-testing-library'
import { renderHook } from '@testing-library/react-hooks'
import { useReduxContext } from '../../src/hooks/useReduxContext'

describe('React', () => {
Expand Down
2 changes: 1 addition & 1 deletion test/hooks/useSelector.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import React, { useCallback, useReducer } from 'react'
import { createStore } from 'redux'
import { renderHook, act } from 'react-hooks-testing-library'
import { renderHook, act } from '@testing-library/react-hooks'
import * as rtl from '@testing-library/react'
import {
Provider as ProviderMock,
Expand Down
3 changes: 2 additions & 1 deletion website/pages/en/versions.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ const versions = require(`${CWD}/versions.json`)
const versionToReleaseTags = {
'5.x': '5.0.0',
'6.x': '6.0.0',
'7.x': '7.0.1'
'7.0': '7.0.0',
'7.1': '7.1.0'
}

function Versions() {
Expand Down
4 changes: 2 additions & 2 deletions website/versioned_docs/version-7.1/api/hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ The selector is approximately equivalent to the [`mapStateToProps` argument to `
However, there are some differences between the selectors passed to `useSelector()` and a `mapState` function:

- The selector may return any value as a result, not just an object. The return value of the selector will be used as the return value of the `useSelector()` hook.
- When an action is dispatched, `useSelector()` will do a shallow comparison of the previous selector result value and the current result value. If they are different, the component will be forced to re-render. If they are the same, they component will not re-render.
- When an action is dispatched, `useSelector()` will do a shallow comparison of the previous selector result value and the current result value. If they are different, the component will be forced to re-render. If they are the same, the component will not re-render.
- The selector function does _not_ receive an `ownProps` argument. However, props can be used through closure (see the examples below) or by using a curried selector.
- Extra care must be taken when using memoizing selectors (see examples below for more details).
- `useSelector()` uses strict `===` reference equality checks by default, not shallow equality (see the following section for more details).
Expand Down Expand Up @@ -171,7 +171,7 @@ export const App = () => {
}
```

However, when the selector is used in multiple component instances and depends on the component's props, you need to ensure that each component instance gets its own selector instance (see [here](https://github.com/reduxjs/reselect#accessing-react-props-in-selectors) for a more thourough explanation of why this is necessary):
However, when the selector is used in multiple component instances and depends on the component's props, you need to ensure that each component instance gets its own selector instance (see [here](https://github.com/reduxjs/reselect#accessing-react-props-in-selectors) for a more thorough explanation of why this is necessary):

```jsx
import React, { useMemo } from 'react'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ original_id: quick-start

## Installation

React Redux 6.x requires **React 16.4 or later.**
React Redux 7.1 requires **React 16.8.3 or later.**

To use React Redux with your React app:

Expand Down

0 comments on commit ae4c0ca

Please sign in to comment.