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: 82b39effea0024b45f1e093e0f1ba14269a9656e
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: 86e962edf8ed077cf720e8e089876227d943dfe8
Choose a head ref
Loading
Showing with 66,129 additions and 16,770 deletions.
  1. +10 −2 .babelrc.js
  2. +1 −0 .github/FUNDING.yml
  3. +0 −24 .github/ISSUE_TEMPLATE/---bug-report.md
  4. +0 −10 .github/ISSUE_TEMPLATE/---support-usage-question.md
  5. +33 −0 .github/ISSUE_TEMPLATE/Bug_report.md
  6. +36 −0 .github/ISSUE_TEMPLATE/Feature_request.md
  7. +5 −0 .github/ISSUE_TEMPLATE/config.yml
  8. +16 −0 .github/workflows/size.yaml
  9. +40 −0 .github/workflows/test.yml
  10. +2 −1 .prettierrc
  11. +0 −7 .travis.yml
  12. +20 −2 README.md
  13. +0 −12 docs/README.md
  14. +4 −47 docs/api/Provider.md
  15. +3 −1 docs/api/batch.md
  16. +7 −2 docs/api/connect-advanced.md
  17. +46 −84 docs/api/connect.md
  18. +93 −39 docs/api/hooks.md
  19. +123 −0 docs/introduction/getting-started.md
  20. +2 −2 docs/introduction/why-use-react-redux.md
  21. +3 −63 docs/troubleshooting.md
  22. +448 −0 docs/tutorials/connect.md
  23. +24 −10 docs/using-react-redux/accessing-store.md
  24. +31 −39 docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md
  25. +13 −12 docs/using-react-redux/connect-extracting-data-with-mapStateToProps.md
  26. +261 −0 docs/using-react-redux/usage-with-typescript.md
  27. +43,463 −7,534 package-lock.json
  28. +44 −45 package.json
  29. +12 −20 rollup.config.js
  30. +1 −1 src/alternate-renderers.js
  31. +5 −1 src/components/Context.js
  32. +14 −11 src/components/Provider.js
  33. +214 −141 src/components/connectAdvanced.js
  34. +4 −4 src/connect/connect.js
  35. +4 −4 src/connect/mapDispatchToProps.js
  36. +3 −2 src/hooks/useDispatch.js
  37. +5 −5 src/hooks/useReduxContext.js
  38. +43 −16 src/hooks/useSelector.js
  39. +2 −2 src/hooks/useStore.js
  40. +1 −1 src/index.js
  41. +40 −18 src/utils/Subscription.js
  42. +1 −1 src/utils/batch.js
  43. +10 −0 src/utils/bindActionCreators.js
  44. +17 −17 src/utils/isPlainObject.js
  45. +1 −1 src/utils/reactBatchedUpdates.native.js
  46. +4 −3 src/utils/shallowEqual.js
  47. +3 −5 src/utils/useIsomorphicLayoutEffect.js
  48. +0 −5 src/utils/wrapActionCreators.js
  49. +11 −8 test/components/Provider.spec.js
  50. +229 −315 test/components/connect.spec.js
  51. +194 −194 test/components/connectAdvanced.spec.js
  52. +8 −8 test/components/hooks.spec.js
  53. +6 −6 test/hooks/useDispatch.spec.js
  54. +103 −28 test/hooks/useSelector.spec.js
  55. +9 −9 test/integration/dynamic-reducers.spec.js
  56. +2 −2 test/integration/server-rendering.spec.js
  57. +25 −22 test/react-native/batch-integration.js
  58. +57 −0 test/utils/Subscription.spec.js
  59. +22 −22 test/utils/isPlainObject.spec.js
  60. +5 −5 test/utils/shallowEqual.spec.js
  61. +0 −28 test/utils/wrapActionCreators.spec.js
  62. +21 −0 website/.gitignore
  63. +17 −0 website/_redirects
  64. +0 −111 website/core/Footer.js
  65. +196 −0 website/docusaurus.config.js
  66. +13,445 −6,890 website/package-lock.json
  67. +12 −7 website/package.json
  68. +0 −42 website/pages/en/404.js
  69. +0 −174 website/pages/en/index.js
  70. +0 −114 website/pages/en/versions.js
  71. +46 −0 website/sidebars.js
  72. +0 −22 website/sidebars.json
  73. +0 −116 website/siteConfig.js
  74. +194 −0 website/src/pages/index.js
  75. +89 −0 website/src/pages/styles.module.css
  76. +54 −0 website/src/theme/NotFound.js
  77. +3 −4 website/static/css/404.css
  78. +154 −205 website/static/css/custom.css
  79. BIN website/static/img/redux-logo-landscape.png
  80. +62 −0 website/static/scripts/monokaiTheme.js
  81. +1 −2 website/versioned_docs/version-5.x/api.md
  82. +1 −2 website/versioned_docs/version-5.x/api/Provider.md
  83. +1 −2 website/versioned_docs/version-5.x/api/api.md
  84. +1 −2 website/versioned_docs/version-5.x/api/connect-advanced.md
  85. +1 −2 website/versioned_docs/version-5.x/api/connect.md
  86. +3 −4 website/versioned_docs/version-5.x/introduction/basic-tutorial.md
  87. +1 −2 website/versioned_docs/version-5.x/introduction/quick-start.md
  88. +23 −33 website/versioned_docs/version-5.x/introduction/why-use-react-redux.md
  89. +1 −2 website/versioned_docs/version-5.x/troubleshooting.md
  90. +4 −5 ...rsioned_docs/version-5.x/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md
  91. +7 −8 website/versioned_docs/version-5.x/using-react-redux/connect-extracting-data-with-mapStateToProps.md
  92. +1 −2 website/versioned_docs/version-6.x/api/Provider.md
  93. +1 −2 website/versioned_docs/version-6.x/api/connect-advanced.md
  94. +1 −2 website/versioned_docs/version-6.x/api/connect.md
  95. +2 −3 website/versioned_docs/version-6.x/introduction/basic-tutorial.md
  96. +3 −8 website/versioned_docs/version-6.x/introduction/quick-start.md
  97. +3 −4 website/versioned_docs/version-6.x/introduction/why-use-react-redux.md
  98. +1 −2 website/versioned_docs/version-6.x/troubleshooting.md
  99. +1 −2 website/versioned_docs/version-6.x/using-react-redux/accessing-store.md
  100. +4 −5 ...rsioned_docs/version-6.x/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md
  101. +11 −12 website/versioned_docs/version-6.x/using-react-redux/connect-extracting-data-with-mapStateToProps.md
  102. +100 −0 website/versioned_docs/version-7.0/api/Provider.md
  103. +2 −3 website/versioned_docs/version-7.0/api/batch.md
  104. +86 −0 website/versioned_docs/version-7.0/api/connect-advanced.md
  105. +1 −2 website/versioned_docs/version-7.0/api/connect.md
  106. +1 −1 {docs → website/versioned_docs/version-7.0}/introduction/basic-tutorial.md
  107. +3 −7 website/versioned_docs/version-7.0/introduction/quick-start.md
  108. +90 −0 website/versioned_docs/version-7.0/introduction/why-use-react-redux.md
  109. +94 −0 website/versioned_docs/version-7.0/troubleshooting.md
  110. +1 −2 website/versioned_docs/version-7.0/using-react-redux/accessing-store.md
  111. +409 −0 ...rsioned_docs/version-7.0/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md
  112. +228 −0 website/versioned_docs/version-7.0/using-react-redux/connect-extracting-data-with-mapStateToProps.md
  113. +100 −0 website/versioned_docs/version-7.1/api/Provider.md
  114. +1 −2 website/versioned_docs/version-7.1/api/batch.md
  115. +86 −0 website/versioned_docs/version-7.1/api/connect-advanced.md
  116. +2 −3 website/versioned_docs/version-7.1/api/connect.md
  117. +104 −46 website/versioned_docs/version-7.1/api/hooks.md
  118. +458 −0 website/versioned_docs/version-7.1/introduction/basic-tutorial.md
  119. +3 −7 website/versioned_docs/version-7.1/introduction/quick-start.md
  120. +3 −4 website/versioned_docs/version-7.1/introduction/why-use-react-redux.md
  121. +94 −0 website/versioned_docs/version-7.1/troubleshooting.md
  122. +144 −0 website/versioned_docs/version-7.1/using-react-redux/accessing-store.md
  123. +409 −0 ...rsioned_docs/version-7.1/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md
  124. +228 −0 website/versioned_docs/version-7.1/using-react-redux/connect-extracting-data-with-mapStateToProps.md
  125. +228 −0 website/versioned_docs/version-7.1/using-react-redux/static-types.md
  126. BIN website/versioned_docs/version-7.2/api/.DS_Store
  127. +100 −0 website/versioned_docs/version-7.2/api/Provider.md
  128. +34 −0 website/versioned_docs/version-7.2/api/batch.md
  129. +86 −0 website/versioned_docs/version-7.2/api/connect-advanced.md
  130. +627 −0 website/versioned_docs/version-7.2/api/connect.md
  131. +481 −0 website/versioned_docs/version-7.2/api/hooks.md
  132. +458 −0 website/versioned_docs/version-7.2/introduction/basic-tutorial.md
  133. +7 −6 {docs → website/versioned_docs/version-7.2}/introduction/quick-start.md
  134. +90 −0 website/versioned_docs/version-7.2/introduction/why-use-react-redux.md
  135. +121 −0 website/versioned_docs/version-7.2/troubleshooting.md
  136. +148 −0 website/versioned_docs/version-7.2/using-react-redux/accessing-store.md
  137. +427 −0 ...rsioned_docs/version-7.2/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md
  138. +228 −0 website/versioned_docs/version-7.2/using-react-redux/connect-extracting-data-with-mapStateToProps.md
  139. +228 −0 website/versioned_docs/version-7.2/using-react-redux/static-types.md
  140. +11 −11 website/versioned_sidebars/version-5.x-sidebars.json
  141. +11 −11 website/versioned_sidebars/version-6.x-sidebars.json
  142. +12 −12 website/versioned_sidebars/version-7.0-sidebars.json
  143. +14 −15 website/versioned_sidebars/version-7.1-sidebars.json
  144. +23 −0 website/versioned_sidebars/version-7.2-sidebars.json
  145. +0 −6 website/versions.json
12 changes: 10 additions & 2 deletions .babelrc.js
Original file line number Diff line number Diff line change
@@ -9,6 +9,14 @@ module.exports = {
['@babel/proposal-object-rest-spread', { loose }],
'@babel/transform-react-jsx',
cjs && ['@babel/transform-modules-commonjs', { loose }],
['@babel/transform-runtime', { useESModules: !cjs }],
].filter(Boolean),
[
'@babel/transform-runtime',
{
useESModules: !cjs,
version: require('./package.json').dependencies[
'@babel/runtime'
].replace(/^[^0-9]*/, '')
}
]
].filter(Boolean)
}
1 change: 1 addition & 0 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
github: timdorr
24 changes: 0 additions & 24 deletions .github/ISSUE_TEMPLATE/---bug-report.md

This file was deleted.

10 changes: 0 additions & 10 deletions .github/ISSUE_TEMPLATE/---support-usage-question.md

This file was deleted.

33 changes: 33 additions & 0 deletions .github/ISSUE_TEMPLATE/Bug_report.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
name: "\U0001F41B Bug report"
about: Something isn't working correctly.

---
<!--
Thank you for contributing to open source!
Do you need some help?
======================
The issue tracker is meant for bug reports only. This isn't the best place for support or usage questions. Questions here don't have as much visibility as they do elsewhere. Before you ask a question, here are some resources to get help first:
- Read the docs: https://react-redux.js.org/
- Check out the troubleshooting guide: https://react-redux.js.org/troubleshooting
- Look for/ask questions on Stack Overflow: https://stackoverflow.com/questions/tagged/redux
- Ask in chat: https://www.reactiflux.com/
Think you found a bug?
======================
The best bug report is a failing test in the repository as a pull request. Otherwise, please use the template below.
-->

**What is the current behavior?**

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to a CodeSandbox (https://codesandbox.io/s/new) or RN Snack (https://snack.expo.io/) example below:



**What is the expected behavior?**

Which versions of React, ReactDOM/React Native, Redux, and React Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React Redux?
36 changes: 36 additions & 0 deletions .github/ISSUE_TEMPLATE/Feature_request.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
name: 👍 Feature Request
about: I'd like React Redux to do something new.
---

<!--
Thank you for contributing to open source!
Do you need some help?
======================
The issue tracker is meant for feature requests and bug reports only. This isn't the best place for
support or usage questions. Questions here don't have as much visibility as they do elsewhere. Before
you ask a question, here are some resources to get help first:
- Read the docs: https://react-redux.js.org/
- Check out the troubleshooting guide: https://react-redux.js.org/troubleshooting
- Look for/ask questions on Stack Overflow: https://stackoverflow.com/questions/tagged/redux
- Ask in chat: https://www.reactiflux.com/
Have a feature request?
=======================
Remove the template from below and provide thoughtful commentary *and code samples* on what this
feature means for your product. What will it allow you to do that you can't do today? How will it
make current work-arounds straightforward? What potential bugs and edge cases does it help to
avoid? etc. Please keep it product-centric.
-->

## New Features

### What is the new or updated feature that you are suggesting?

### Why should this feature be included?

### What docs changes are needed to explain this?
5 changes: 5 additions & 0 deletions .github/ISSUE_TEMPLATE/config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
blank_issues_enabled: false
contact_links:
- name: 🤔 Questions and Help
url: https://redux.js.org/introduction/getting-started#help-and-discussion
about: This is a bug tracker, not a support system. For usage questions, please use our support resources.
16 changes: 16 additions & 0 deletions .github/workflows/size.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
name: Bundle Size

on: [pull_request]

jobs:
build:
name: Check compressed size
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v2-beta
with:
fetch-depth: 1
- uses: preactjs/compressed-size-action@v1
with:
repo-token: '${{ secrets.GITHUB_TOKEN }}'
40 changes: 40 additions & 0 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
name: Tests

on:
push:
branches: [ master ]
pull_request:
branches: [ master ]

jobs:
build:
name: Test Suite
runs-on: ubuntu-latest

steps:

- name: Set up Node
uses: actions/setup-node@v1
with:
node-version: 14.x

- name: Checkout code
uses: actions/checkout@v2

- name: Cache dependencies
uses: actions/cache@v2
with:
path: ~/.npm
key: ${{ runner.OS }}-npm-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.OS }}-npm-
${{ runner.OS }}-
- name: Install dependencies
run: npm ci

- name: Run test suite
run: npm test

- name: Collect coverage
run: npm run coverage
3 changes: 2 additions & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"semi": false,
"singleQuote": true,
"tabWidth": 2
"tabWidth": 2,
"endOfLine": "auto"
}
7 changes: 0 additions & 7 deletions .travis.yml

This file was deleted.

22 changes: 20 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -11,12 +11,30 @@ Performant and flexible.

## Installation

React Redux requires **React 16.8.3 or later.**
### Using Create React App

The recommended way to start new apps with React Redux is by using the [official Redux+JS template](https://github.com/reduxjs/cra-template-redux) for [Create React App](https://github.com/facebook/create-react-app), which takes advantage of [Redux Toolkit](https://redux-toolkit.js.org/).

```sh
npx create-react-app my-app --template redux
```
npm install --save react-redux

### An Existing React App

React Redux 7.1 requires **React 16.8.3 or later.**

To use React Redux with your React app, install it as a dependency:

```bash
# If you use npm:
npm install react-redux

# Or if you use Yarn:
yarn add react-redux
```

You'll also need to [install Redux](https://redux.js.org/introduction/installation) and [set up a Redux store](https://redux.js.org/recipes/configuring-your-store/) in your app.

This assumes that you’re using [npm](http://npmjs.com/) package manager
with a module bundler like [Webpack](https://webpack.js.org/) or
[Browserify](http://browserify.org/) to consume [CommonJS
12 changes: 0 additions & 12 deletions docs/README.md

This file was deleted.

51 changes: 4 additions & 47 deletions docs/api/Provider.md
Original file line number Diff line number Diff line change
@@ -9,11 +9,11 @@ hide_title: true

## Overview

The `<Provider />` makes the Redux `store` available to any nested components that have been wrapped in the `connect()` function.
The `<Provider>` component makes the Redux `store` available to any nested components that need to access the Redux store.

Since any React component in a React Redux app can be connected, most applications will render a `<Provider>` at the top level, with the entire app’s component tree inside of it.
Since any React component in a React Redux app can be connected to the store, most applications will render a `<Provider>` at the top level, with the entire app’s component tree inside of it.

Normally, you can’t use a connected component unless it is nested inside of a `<Provider>`.
The [Hooks](./hooks.md) and [`connect`](./connect.md) APIs can then access the provided store instance via React's Context mechanism.

### Props

@@ -30,29 +30,12 @@ You may provide a context instance. If you do so, you will need to provide the s
>
> Could not find "store" in the context of "Connect(MyComponent)". Either wrap the root component in a `<Provider>`, or pass a custom React context provider to `<Provider>` and the corresponding React context consumer to Connect(Todo) in connect options.
**Note:** You do not need to provide custom context in order to access the store.
React Redux exports the context instance it uses by default so that you can access the store by:

```js
import { ReactReduxContext } from 'react-redux'

// in your connected component
render() {
return (
<ReactReduxContext.Consumer>
{({ store }) => {
// do something with the store here
}}
</ReactReduxContext.Consumer>
)
}
```


### Example Usage

In the example below, the `<App />` component is our root-level component. This means it’s at the very top of our component hierarchy.

**Vanilla React Example**

```jsx
import React from 'react'
@@ -72,29 +55,3 @@ ReactDOM.render(
)
```

**Usage with React Router**

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { Router, Route } from 'react-router-dom'

import { App } from './App'
import { Foo } from './Foo'
import { Bar } from './Bar'
import createStore from './createReduxStore'

const store = createStore()

ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route exact path="/" component={App} />
<Route path="/foo" component={Foo} />
<Route path="/bar" component={Bar} />
</Router>
</Provider>,
document.getElementById('root')
)
```
4 changes: 3 additions & 1 deletion docs/api/batch.md
Original file line number Diff line number Diff line change
@@ -8,9 +8,11 @@ hide_title: true
# `batch()`

```js
batch(fn: Function)
batch((fn: Function))
```

*added in v7.0.0*

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:
9 changes: 7 additions & 2 deletions docs/api/connect-advanced.md
Original file line number Diff line number Diff line change
@@ -17,7 +17,12 @@ It does not modify the component class passed to it; instead, it _returns_ a new
Most applications will not need to use this, as the default behavior in `connect` is intended to work for most use cases.
> Note: `connectAdvanced` was added in version 5.0, and `connect` was reimplemented as a specific set of parameters to `connectAdvanced`.
:::info
`connectAdvanced` was added in version 5.0, and `connect` was reimplemented as a specific set of parameters to `connectAdvanced`. However, [**`connectAdvanced` is now deprecated**](https://github.com/reduxjs/react-redux/issues/1236) and will eventually be removed in a future major version of React Redux.
:::
## Arguments
@@ -72,7 +77,7 @@ function selectorFactory(dispatch) {
let result = {}

const actions = bindActionCreators(actionCreators, dispatch)
const addTodo = text => actions.addTodo(ownProps.userId, text)
const addTodo = (text) => actions.addTodo(ownProps.userId, text)

return (nextState, nextOwnProps) => {
const todos = nextState.todos[nextOwnProps.userId]
Loading