diff --git a/docs/api/Provider.md b/docs/api/Provider.md
index 64ab1737b..68e02c7b4 100644
--- a/docs/api/Provider.md
+++ b/docs/api/Provider.md
@@ -13,9 +13,7 @@ The `` makes the Redux `store` available to any nested components th
Since any React component in a React Redux app can be connected, most applications will render a `` 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 `` .
-
-Note: If you really need to, you can manually pass `store` as a prop to a connected 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 ``.
+Normally, you can’t use a connected component unless it is nested inside of a ``.
### Props
@@ -25,6 +23,29 @@ The single Redux `store` in your application.
`children` (ReactElement)
The root of your component hierarchy.
+`context`
+You may provide a context instance. If you do so, you will need to provide the same context instance to all of your connected components as well. Failure to provide the correct context results in runtime error:
+
+> Invariant Violation
+>
+> Could not find "store" in the context of "Connect(MyComponent)". Either wrap the root component in a , or pass a custom React context provider to 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 (
+
+ {({ store }) => {store}
}
+
+ )
+}
+```
+
### Example Usage
In the example below, the `` component is our root-level component. This means it’s at the very top of our component hierarchy.
diff --git a/docs/introduction/quick-start.md b/docs/introduction/quick-start.md
index 1f6edb8d1..2ddaf94fb 100644
--- a/docs/introduction/quick-start.md
+++ b/docs/introduction/quick-start.md
@@ -27,7 +27,7 @@ yarn add react-redux
You'll also need to [install Redux](https://redux-docs.netlify.com/introduction/installation) and [set up a Redux store](https://redux-docs.netlify.com/recipes/configuring-your-store) in your app.
-## `Provider` and `connect`
+## ``
React Redux provides ``, which makes the Redux store available to the rest of your app:
@@ -49,6 +49,8 @@ ReactDOM.render(
)
```
+## `connect()`
+
React Redux provides a `connect` function for you to connect your component to the store.
Normally, you’ll call `connect` in this way:
@@ -73,6 +75,7 @@ export default connect(
)(Counter)
```
+
## Help and Discussion
The **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** of the **[Reactiflux Discord community](http://www.reactiflux.com)** is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us!
diff --git a/docs/using-react-redux/accessing-store.md b/docs/using-react-redux/accessing-store.md
new file mode 100644
index 000000000..9ebf55f5a
--- /dev/null
+++ b/docs/using-react-redux/accessing-store.md
@@ -0,0 +1,144 @@
+---
+id: accessing-store
+title: Accessing the Store
+hide_title: true
+sidebar_label: Accessing the Store
+---
+
+# Accessing the Store
+
+React Redux provides APIs that allow your components to dispatch actions and subscribe to data updates from the store.
+
+As part of that, React Redux abstracts away the details of which store you are using, and the exact details of how that
+store interaction is handled. In typical usage, your own components should never need to care about those details, and
+won't ever reference the store directly. React Redux also internally handles the details of how the store and state are
+propagated to connected components, so that this works as expected by default.
+
+However, there may be certain use cases where you may need to customize how the store and state are propagated to
+connected components, or access the store directly. Here are some examples of how to do this.
+
+## Understanding Context Usage
+
+Internally, React Redux uses [React's "context" feature](https://reactjs.org/docs/context.html) to make the
+Redux store accessible to deeply nested connected components. As of React Redux version 6, this is normally handled
+by a single default context object instance generated by `React.createContext()`, called `ReactReduxContext`.
+
+React Redux's `` component uses `` to put the Redux store and the current store
+state into context, and `connect` uses `` to read those values and handle updates.
+
+## Providing Custom Context
+
+Instead of using the default context instance from React Redux, you may supply your own custom context instance.
+
+```js
+
+
+
+```
+
+If you supply a custom context, React Redux will use that context instance instead of the one it creates and exports by default.
+
+After you’ve supplied the custom context to ``, you will need to supply this context instance to all of your connected components that are expected to connect to the same store:
+
+```js
+// You can pass the context as an option to connect
+export default connect(
+ mapState,
+ mapDispatch,
+ null,
+ { context: MyContext }
+)(MyComponent)
+
+// or, call connect as normal to start
+const ConnectedComponent = connect(
+ mapState,
+ mapDispatch
+)(MyComponent)
+
+// Later, pass the custom context as a prop to the connected component
+
+```
+
+The following runtime error occurs when React Redux does not find a store in the context it is looking. For example:
+
+- You provided a custom context instance to ``, but did not provide the same instance (or did not provide any) to your connected components.
+- You provided a custom context to your connected component, but did not provide the same instance (or did not provide any) to ``.
+
+> Invariant Violation
+>
+> Could not find "store" in the context of "Connect(MyComponent)". Either wrap the root component in a ``, or pass a custom React context provider to `` and the corresponding React context consumer to Connect(Todo) in connect options.
+
+## Multiple Stores
+
+[Redux was designed to use a single store](https://redux.js.org/api/store#a-note-for-flux-users).
+However, if you are in an unavoidable position of needing to use multiple stores, with v6 you may do so by providing (multiple) custom contexts.
+This also provides a natural isolation of the stores as they live in separate context instances.
+
+```js
+// a naive example
+const ContextA = React.createContext();
+const ContextB = React.createContext();
+
+// assuming reducerA and reducerB are proper reducer functions
+const storeA = createStore(reducerA);
+const storeB = createStore(reducerB);
+
+// supply the context instances to Provider
+function App() {
+ return (
+
+
+
+
+
+ );
+}
+
+// fetch the corresponding store with connected components
+// you need to use the correct context
+connect(mapStateA, null, null, { context: ContextA })(MyComponentA)
+
+// You may also pass the alternate context instance directly to the connected component instead
+
+
+// it is possible to chain connect()
+// in this case MyComponent will receive merged props from both stores
+compose(
+ connect(mapStateA, null, null, { context: ContextA }),
+ connect(mapStateB, null, null, { context: ContextB })
+)(MyComponent);
+```
+
+## Using `ReactReduxContext` Directly
+
+In rare cases, you may need to access the Redux store directly in your own components. This can be done by rendering
+the appropriate context consumer yourself, and accessing the `store` field out of the context value.
+
+> **Note**: This is **_not_ considered part of the React Redux public API, and may break without notice**. We do recognize
+> that the community has use cases where this is necessary, and will try to make it possible for users to build additional
+> functionality on top of React Redux, but our specific use of context is considered an implementation detail.
+> If you have additional use cases that are not sufficiently covered by the current APIs, please file an issue to discuss
+> possible API improvements.
+
+```js
+import { ReactReduxContext } from 'react-redux'
+
+// in your connected component
+function MyConnectedComponent() {
+ return (
+
+ {({ store }) => {
+ // do something useful with the store, like passing it to a child
+ // component where it can be used in lifecycle methods
+ }}
+
+ )
+}
+```
+
+## Further Resources
+
+- CodeSandbox example: [A reading list app with theme using a separate store](https://codesandbox.io/s/92pm9n2kl4), implemented by providing (multiple) custom context(s).
+- Related issues:
+ - [#1132: Update docs for using a different store key](https://github.com/reduxjs/react-redux/issues/1132)
+ - [#1126: `` misses state changes that occur between when its constructor runs and when it mounts](https://github.com/reduxjs/react-redux/issues/1126)
diff --git a/website/sidebars.json b/website/sidebars.json
index f7f73beca..1751a9d49 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -7,7 +7,8 @@
],
"Using React Redux": [
"using-react-redux/connect-mapstate",
- "using-react-redux/connect-mapdispatch"
+ "using-react-redux/connect-mapdispatch",
+ "using-react-redux/accessing-store"
],
"API Reference": [
"api/connect",
diff --git a/website/siteConfig.js b/website/siteConfig.js
index 1c69bac3e..ce8253de4 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -44,7 +44,13 @@ const siteConfig = {
/* Colors for website */
colors: {
primaryColor: "#764ABC",
- secondaryColor: "#764ABC",
+ secondaryColor: "#40216F",
+ accentColor1: "#717171",
+ accentColor2: "#F3EAFF",
+ accentColor3: "#D2B9F3",
+ accentColor4: "#ECF4F9",
+ accentColor5: "#CBDDEA",
+ accentColor6: "#2F5773"
},
/* Custom fonts for website */
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index fb59f182b..7d038338c 100644
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -8,24 +8,116 @@ header.postHeader:empty + article h1 {
margin-top: 0;
}
-a {
- /* blue links - kickin' it old-school! */
- color: blue;
+.homeContainer .homeWrapper {
+ padding-bottom: 1em;
}
-a:hover {
- /* add underlines for a11y */
- text-decoration: underline;
+
+.mainContainer {
+ padding-top: 24px;
+ padding-bottom: 24px;
}
-a:visited {
+
+.post article a {
+ /* add underlines to links in blocks of text for a11y */
color: $primaryColor;
+ text-decoration: underline;
+ overflow: hidden;
+ position: relative;
+ transition: outline-offset 0.2s ease-in-out;
+}
+.post article a:hover,
+.post article a:focus,
+.post article a:active {
+ /* change color and bg to display state change in more than one way for a11y */
+ background-color: $secondaryColor;
+ color: white;
+ box-shadow: 0 0 0 2px $secondaryColor;
+ outline: none;
+ text-decoration: underline;
+ overflow: hidden;
+ position: relative;
+ transition: outline-offset 0.2s ease-in-out;
+}
+.post article blockquote {
+ color: black;
+ background-color: $accentColor4;
+ border-left: 8px solid $accentColor5;
+}
+
+.post article blockquote a {
+ /* add underlines to links in blocks of text for a11y */
+ color: black;
+ text-decoration: underline;
+ overflow: hidden;
+ position: relative;
+ transition: outline-offset 0.2s ease-in-out;
+}
+
+.post article blockquote a:hover,
+.post article blockquote a:focus,
+.post article blockquote a:active {
+ /* change color and bg to display state change in more than one way for a11y */
+ background-color: $accentColor6;
+ color: white;
+ box-shadow: 0 0 0 2px $accentColor6;
+ outline: none;
+ text-decoration: underline;
+}
+.post article blockquote {
+ color: black;
+ background-color: $accentColor4;
+ border-left: 8px solid $accentColor5;
+}
+.post article blockquote a {
+ /* add underlines to links in blocks of text for a11y */
+ color: black;
+ text-decoration: underline;
+ overflow: hidden;
+ position: relative;
+ transition: outline-offset 0.2s ease-in-out;
+}
+.post article blockquote a:hover,
+.post article blockquote a:focus,
+.post article blockquote a:active {
+ /* change color and bg to display state change in more than one way for a11y */
+ background-color: $accentColor6;
+ color: white;
+ box-shadow: 0 0 0 2px $accentColor6;
+ outline: none;
+ text-decoration: underline;
+}
+.post article .hash-link {
+ /* add underlines to links in blocks of text for a11y */
+ color: $accentColor1;
+ transition: outline-offset 0.2s ease-in-out;
+ opacity: 1;
+}
+.post article .hash-link:hover,
+.post article .hash-link:focus,
+.post article .hash-link:active {
+ /* change color and bg to display state change in more than one way for a11y */
+ color: $secondaryColor;
+ background-color: white;
+ box-shadow: 0 0 0 0 $accentColor6;
+ transition: outline-offset 0.2s ease-in-out;
+}
+.hash-link .hash-link-icon {
+ fill: currentColor;
}
.fixedHeaderContainer header .headerTitleWithLogo {
color : white;
display: block !important;
}
-.navigationSlider .slidingNav ul a {
- color : white !important;
- font-weight: 400 !important;
+.navigationSlider .slidingNav ul.nav-site a {
+ color : white;
+ font-weight: 400;
+}
+.navigationSlider .slidingNav ul.nav-site a:hover,
+.navigationSlider .slidingNav ul.nav-site a:focus,
+.navigationSlider .slidingNav ul.nav-site a:active {
+ color : white;
+ font-weight: 400;
+ text-decoration: underline;
}
.navigationSlider .slidingNav ul a[href*="github"] {
font-size: 0;
@@ -56,8 +148,9 @@ a:visited {
background: #fff;
color: $primaryColor;
}
-.productShowcaseSection .featureBlock {
- padding: 40px 0;
+.productShowcaseSection .rowContainer {
+ padding-top: 30px;
+ padding-bottom: 30px;
}
.productShowcaseSection .featureBlock img {
width: 60px;
@@ -66,7 +159,6 @@ a:visited {
max-height: 60px;
}
-
.featureBlock .blockContent > div p {
text-align: left;
}
@@ -92,11 +184,15 @@ a:visited {
margin-bottom: 5px;
}
+.libsContainer {
+ display: flex;
+ justify-content: center;
+}
@media only screen and (max-device-width: 480px) {
.productShowcaseSection .featureBlock {
- padding-top: 30px;
- padding-bottom: 5px;
+ padding-top: 0;
+ padding-bottom: 0;
}
.featureBlock .imageAlignTop .blockImage {
@@ -155,6 +251,9 @@ a:visited {
.navSearchWrapper:after {
left: 35px;
}
+ .libsContainer {
+ flex-direction: column;
+ }
}
@media only screen and (min-width: 1400px) {