Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: reduxjs/react-redux
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v7.1.1
Choose a base ref
...
head repository: reduxjs/react-redux
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v7.1.2
Choose a head ref
  • 17 commits
  • 27 files changed
  • 13 contributors

Commits on Aug 27, 2019

  1. add a line to insist on the pure nature (#1386)

    * add a line to insist on the pure nature
    
    add a line to insist on the pure nature of mapStateToProps function
    
    * Reorder
    aminsoheyli authored and timdorr committed Aug 27, 2019

    Unverified

    This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
    Copy the full SHA
    e228b32 View commit details
  2. Clarify two way dispatch binding in more detail (#1387)

    * Clarify two way dispatch binding in more detail
    
    * Formatted the new code blocks
    aminsoheyli authored and timdorr committed Aug 27, 2019

    Unverified

    This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
    Copy the full SHA
    5b268f3 View commit details

Commits on Sep 10, 2019

  1. Copy the full SHA
    6c873c7 View commit details

Commits on Oct 1, 2019

  1. Copy the full SHA
    063c2ed View commit details

Commits on Oct 2, 2019

  1. Unverified

    This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
    Copy the full SHA
    d9c49fa View commit details
  2. Revert "Docs: Fix Code Example for API connect()" (#1414)

    This reverts commit d9c49fa.
    markerikson authored Oct 2, 2019

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    4bc231f View commit details
  3. Copy the full SHA
    31c998a View commit details

Commits on Oct 8, 2019

  1. Unverified

    This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
    Copy the full SHA
    69d62e4 View commit details

Commits on Oct 11, 2019

  1. Unverified

    This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
    Copy the full SHA
    2297944 View commit details

Commits on Oct 14, 2019

  1. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    388d9e4 View commit details
  2. Remove unused latestStoreState field (#1426)

    * Remove unused `latestStoreState` field
    
    1. This field doesn't actually affect anything: `action.payload` is always a fresh object anyway
    2. Having reference to some arbitrary state from the past (namely, the one that triggered the last update for given component) leads to huge memory leaks if the state object is large and there are lots of connected components.
    
    * Revert redundant change
    Hypnosphi authored and timdorr committed Oct 14, 2019

    Unverified

    This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
    Copy the full SHA
    6725400 View commit details
  3. Copy the full SHA
    2eac861 View commit details

Commits on Oct 29, 2019

  1. [ImgBot] Optimize images (#1434)

    *Total -- 92.09kb -> 76.66kb (16.76%)
    
    /website/static/img/redux-logo-twitter.png -- 37.60kb -> 28.99kb (22.9%)
    /website/static/img/redux-logo-landscape.png -- 38.69kb -> 32.33kb (16.44%)
    /website/static/img/noun_Certificate_1945625.svg -- 5.10kb -> 4.84kb (5.1%)
    /website/static/img/noun_Rocket_1245262.svg -- 3.35kb -> 3.26kb (2.68%)
    /website/static/img/redux_white.svg -- 1.12kb -> 1.09kb (2.27%)
    /website/static/img/redux.svg -- 1.12kb -> 1.09kb (2.01%)
    /website/static/img/noun_Check_1870817.svg -- 0.30kb -> 0.29kb (1.95%)
    /website/static/img/noun_Box_1664404.svg -- 2.72kb -> 2.68kb (1.79%)
    /website/static/img/external-link-square-alt-solid.svg -- 0.61kb -> 0.61kb (0.95%)
    /website/static/img/github-brands.svg -- 1.48kb -> 1.47kb (0.46%)
    
    Signed-off-by: ImgBotApp <[email protected]>
    
    Co-authored-by: Imgbot <[email protected]>
    2 people authored and timdorr committed Oct 29, 2019

    Unverified

    This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
    Copy the full SHA
    4be8b3f View commit details

Commits on Nov 2, 2019

  1. Unverified

    This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
    Copy the full SHA
    b5034a6 View commit details

Commits on Nov 6, 2019

  1. Fix RN batching and effect behavior (#1444)

    * Add React Native deps for testing
    
    * Add a Jest config to run tests in an RN environment
    
    * Add initial RN tests
    
    * Add test for RN batch export
    
    * Add jest-native testing assertions
    
    * Extract useIsomorphicLayoutEffect utility
    
    * Add additional RN batching-related tests
    
    * 7.1.2-alpha.0
    markerikson authored Nov 6, 2019

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    b832f83 View commit details
  2. Pass non-Redux-store values through the store prop (#1447)

    * Allow non-Redux-store values as a prop named `store`
    
    * Formatting
    markerikson authored Nov 6, 2019

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    2677705 View commit details
  3. 7.1.2

    markerikson committed Nov 6, 2019
    Copy the full SHA
    5f495b2 View commit details
2 changes: 1 addition & 1 deletion docs/api/connect.md
Original file line number Diff line number Diff line change
@@ -571,7 +571,7 @@ export default connect(
The number of declared function parameters of `mapStateToProps` and `mapDispatchToProps` determines whether they receive `ownProps`
> 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
> 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. If the incoming value of `ownProps` is `undefined`, the default argument value will be used.
```js
function mapStateToProps(state) {
25 changes: 11 additions & 14 deletions docs/api/hooks.md
Original file line number Diff line number Diff line change
@@ -13,7 +13,6 @@ React Redux now offers a set of hook APIs as an alternative to the existing `con

These hooks were first added in v7.1.0.


## Using Hooks in a React Redux App

As with `connect()`, you should start by wrapping your entire application in a `<Provider>` component to make the store available throughout the component tree:
@@ -212,10 +211,6 @@ export const App = () => {

## Removed: `useActions()`





## `useDispatch()`

```js
@@ -295,7 +290,6 @@ export const CounterComponent = ({ value }) => {
}
```


## Custom context

The `<Provider>` component allows you to specify an alternate context via the `context` prop. This is useful if you're building a complex reusable component, and you don't want your store to collide with any Redux store your consumers' applications might use.
@@ -362,7 +356,7 @@ If you prefer to deal with this issue yourself, here are some possible options f
- In cases where you do rely on props in your selector function _and_ those props may change over time, _or_ the data you're extracting may be based on items that can be deleted, try writing the selector functions defensively. Don't just reach straight into `state.todos[props.id].name` - read `state.todos[props.id]` first, and verify that it exists before trying to read `todo.name`.
- Because `connect` adds the necessary `Subscription` to the context provider and delays evaluating child subscriptions until the connected component has re-rendered, putting a connected component in the component tree just above the component using `useSelector` will prevent these issues as long as the connected component gets re-rendered due to the same store update as the hooks component.

> **Note**: For a longer description of this issue, see [this chat log that describes the problems in more detail](https://gist.github.com/markerikson/faac6ae4aca7b82a058e13216a7888ec), as well as [issue #1179](https://github.com/reduxjs/react-redux/issues/1179).
> **Note**: For a longer description of this issue, see ["Stale props and zombie children in Redux" by Kai Hao](https://kaihao.dev/posts/Stale-props-and-zombie-children-in-Redux), [this chat log that describes the problems in more detail](https://gist.github.com/markerikson/faac6ae4aca7b82a058e13216a7888ec), and [issue #1179](https://github.com/reduxjs/react-redux/issues/1179).
### Performance

@@ -395,7 +389,7 @@ This hook was in our original alpha release, but removed in `v7.1.0-alpha.4`, ba
That suggestion was based on "binding action creators" not being as useful in a hooks-based use case, and causing too
much conceptual overhead and syntactic complexity.

You should probably prefer to call the [`useDispatch`](#usedispatch) hook in your components to retrieve a reference to `dispatch`,
You should probably prefer to call the [`useDispatch`](#usedispatch) hook in your components to retrieve a reference to `dispatch`,
and manually call `dispatch(someActionCreator())` in callbacks and effects as needed. You may also use the Redux
[`bindActionCreators`](https://redux.js.org/api/bindactioncreators) function in your own code to bind action creators,
or "manually" bind them like `const boundAddTodo = (text) => dispatch(addTodo(text))`.
@@ -410,12 +404,15 @@ import { useMemo } from 'react'

export function useActions(actions, deps) {
const dispatch = useDispatch()
return useMemo(() => {
if (Array.isArray(actions)) {
return actions.map(a => bindActionCreators(a, dispatch))
}
return bindActionCreators(actions, dispatch)
}, deps ? [dispatch, ...deps] : [dispatch])
return useMemo(
() => {
if (Array.isArray(actions)) {
return actions.map(a => bindActionCreators(a, dispatch))
}
return bindActionCreators(actions, dispatch)
},
deps ? [dispatch, ...deps] : [dispatch]
)
}
```

27 changes: 27 additions & 0 deletions docs/troubleshooting.md
Original file line number Diff line number Diff line change
@@ -92,3 +92,30 @@ If you have context issues,
### Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you’re trying to add a ref to a component that doesn’t have an owner

If you’re using React for web, this usually means you have a [duplicate React](https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375). Follow the linked instructions to fix this.

### I'm getting a warning about useLayoutEffect in my unit tests

ReactDOM emits this warning if `useLayoutEffect` is used "on the server". React Redux tries to get around the issue by detecting whether it is running within a browser context. Jest, by default, defines enough of the browser environment that React Redux thinks it's running in a browser, causing these warnings.

You can prevent the warning by setting the `@jest-environment` for a single test file:

```jsx
// my.test.jsx
/**
* @jest-environment node
*/
```

Or by setting it globally:

```js
// package.json
{
"name": "my-project",
"jest": {
"testEnvironment": "node"
}
}
```

See https://github.com/facebook/react/issues/14927#issuecomment-490426131
Original file line number Diff line number Diff line change
@@ -151,11 +151,25 @@ If your `mapDispatchToProps` function is declared as taking two parameters, it w

This means, instead of re-binding new `props` to action dispatchers upon component re-rendering, you may do so when your component's `props` change.

**Binds on component re-rendering**

```js
render() {
return <button onClick={() => this.props.toggleTodo(this.props.todoId)} />
}

const mapDispatchToProps = dispatch => {
toggleTodo: todoId => dispatch(toggleTodo(todoId))
}
```

**Binds on `props` change**

```js
// binds on component re-rendering
;<button onClick={() => this.props.toggleTodo(this.props.todoId)} />
render() {
return <button onClick={() => this.props.toggleTodo()} />
}

// binds on `props` change
const mapDispatchToProps = (dispatch, ownProps) => {
toggleTodo: () => dispatch(toggleTodo(ownProps.todoId))
}
Original file line number Diff line number Diff line change
@@ -112,7 +112,7 @@ As part of the "re-shaping data" idea, `mapStateToProps` functions frequently ne
### `mapStateToProps` Functions Should Be Pure and Synchronous
Much like a Redux reducer, a `mapStateToProps` function should always be 100% pure and synchronous. It should simply take `state` (and `ownProps`) as arguments, and return the data the component needs as props. It should _not_ be used to trigger asynchronous behavior like AJAX calls for data fetching, and the functions should not be declared as `async`.
Much like a Redux reducer, a `mapStateToProps` function should always be 100% pure and synchronous. It should only take `state` (and `ownProps`) as arguments, and return the data the component needs as props without mutating those arguments. It should _not_ be used to trigger asynchronous behavior like AJAX calls for data fetching, and the functions should not be declared as `async`.
## `mapStateToProps` and Performance
@@ -184,7 +184,7 @@ function mapStateToProps(state) {
}
const mapStateToProps = (state, ownProps = {}) => {
console.log(state) // state
console.log(ownProps) // undefined
console.log(ownProps) // {}
}
```
29 changes: 29 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
const defaults = {
coverageDirectory: './coverage/',
collectCoverage: true,
testURL: 'http://localhost'
}

const testFolderPath = folderName => `<rootDir>/test/${folderName}/**/*.js`

const NORMAL_TEST_FOLDERS = ['components', 'hooks', 'integration', 'utils']

const standardConfig = {
...defaults,
displayName: 'ReactDOM',
testMatch: NORMAL_TEST_FOLDERS.map(testFolderPath)
}

const rnConfig = {
...defaults,
displayName: 'React Native',
testMatch: [testFolderPath('react-native')],
preset: 'react-native',
transform: {
'^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js'
}
}

module.exports = {
projects: [standardConfig, rnConfig]
}
Loading