From fee81904ba4414d75872da1e84b24e54214eb371 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sat, 16 Apr 2022 11:36:14 -0400 Subject: [PATCH] Update 7.x docs with edits from master --- docs/api/connect.md | 4 ++-- docs/api/hooks.md | 7 +++---- docs/troubleshooting.md | 5 +++-- docs/tutorials/quick-start.md | 2 +- docs/using-react-redux/accessing-store.md | 4 ++++ 5 files changed, 13 insertions(+), 9 deletions(-) diff --git a/docs/api/connect.md b/docs/api/connect.md index 9a674ed2b..d143ea9fd 100644 --- a/docs/api/connect.md +++ b/docs/api/connect.md @@ -70,9 +70,9 @@ const mapStateToProps = (state, ownProps) => ({ Your `mapStateToProps` functions are expected to return an object. This object, normally referred to as `stateProps`, will be merged as props to your connected component. If you define `mergeProps`, it will be supplied as the first parameter to `mergeProps`. -The return of the `mapStateToProps` determine whether the connected component will re-render (details [here](../using-react-redux/connect-mapstate#return-values-determine-if-your-component-re-renders)). +The return of the `mapStateToProps` determine whether the connected component will re-render (details [here](../using-react-redux/connect-extracting-data-with-mapStateToProps.md#return-values-determine-if-your-component-re-renders)). -For more details on recommended usage of `mapStateToProps`, please refer to [our guide on using `mapStateToProps`](../using-react-redux/connect-mapstate). +For more details on recommended usage of `mapStateToProps`, please refer to [our guide on using `mapStateToProps`](../using-react-redux/connect-extracting-data-with-mapStateToProps.md). > You may define `mapStateToProps` and `mapDispatchToProps` as a factory function, i.e., you return a function instead of an object. In this case your returned function will be treated as the real `mapStateToProps` or `mapDispatchToProps`, and be called in subsequent calls. You may see notes on [Factory Functions](#factory-functions) or our guide on performance optimizations. diff --git a/docs/api/hooks.md b/docs/api/hooks.md index 5f4bfb1ef..e4f3ac7cb 100644 --- a/docs/api/hooks.md +++ b/docs/api/hooks.md @@ -55,7 +55,7 @@ The selector function should be [pure](https://en.wikipedia.org/wiki/Pure_functi ::: -The selector is approximately equivalent to the [`mapStateToProps` argument to `connect`](../using-react-redux/connect-mapstate) conceptually. The selector will be called with the entire Redux store state as its only argument. The selector will be run whenever the function component renders (unless its reference hasn't changed since a previous render of the component so that a cached result can be returned by the hook without re-running the selector). `useSelector()` will also subscribe to the Redux store, and run your selector whenever an action is dispatched. +The selector is approximately equivalent to the [`mapStateToProps` argument to `connect`](../using-react-redux/connect-extracting-data-with-mapStateToProps.md) conceptually. The selector will be called with the entire Redux store state as its only argument. The selector will be run whenever the function component renders (unless its reference hasn't changed since a previous render of the component so that a cached result can be returned by the hook without re-running the selector). `useSelector()` will also subscribe to the Redux store, and run your selector whenever an action is dispatched. However, there are some differences between the selectors passed to `useSelector()` and a `mapState` function: @@ -190,7 +190,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 thorough 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#q-can-i-share-a-selector-across-multiple-component-instances) for a more thorough explanation of why this is necessary): ```jsx import React, { useMemo } from 'react' @@ -290,7 +290,7 @@ However, the React hooks lint rules do not know that `dispatch` should be stable should be added to dependency arrays for `useEffect` and `useCallback`. The simplest solution is to do just that: ````js -export const Todos() = () => { +export const Todos = () => { const dispatch = useDispatch(); useEffect(() => { @@ -481,4 +481,3 @@ export function useShallowEqualSelector(selector) { ### Additional considerations when using hooks There are some architectural trade offs to take into consideration when deciding whether to use hooks or not. Mark Erikson summarizes these nicely in his two blog posts [Thoughts on React Hooks, Redux, and Separation of Concerns](https://blog.isquaredsoftware.com/2019/07/blogged-answers-thoughts-on-hooks/) and [Hooks, HOCs, and Tradeoffs](https://blog.isquaredsoftware.com/2019/09/presentation-hooks-hocs-tradeoffs/). -```` diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md index fab9e64bd..b98df1a80 100644 --- a/docs/troubleshooting.md +++ b/docs/troubleshooting.md @@ -25,8 +25,9 @@ In short, If you have context issues, 1. [Make sure you don’t have a duplicate instance of React](https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375) on the page. -2. Make sure you didn’t forget to wrap your root or some other ancestor component in [``](#provider-store). -3. Make sure you’re running the latest versions of React and React Redux. +2. Make sure you don't have multiple instances/copies of React Redux in your project. +3. Make sure you didn’t forget to wrap your root or some other ancestor component in [``](#provider-store). +4. Make sure you’re running the latest versions of React and React Redux. ### 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 diff --git a/docs/tutorials/quick-start.md b/docs/tutorials/quick-start.md index 103a94a08..3e4a8a044 100644 --- a/docs/tutorials/quick-start.md +++ b/docs/tutorials/quick-start.md @@ -143,7 +143,7 @@ export default configureStore({ Now we can use the React Redux hooks to let React components interact with the Redux store. We can read data from the store with `useSelector`, and dispatch actions using `useDispatch`. Create a `src/features/counter/Counter.js` file with a `` component inside, then import that component into `App.js` and render it inside of ``. ```jsx title="features/counter/Counter.js" -import React, { useState } from 'react' +import React from 'react' import { useSelector, useDispatch } from 'react-redux' import { decrement, increment } from './counterSlice' import styles from './Counter.module.css' diff --git a/docs/using-react-redux/accessing-store.md b/docs/using-react-redux/accessing-store.md index f53a8a63c..970819036 100644 --- a/docs/using-react-redux/accessing-store.md +++ b/docs/using-react-redux/accessing-store.md @@ -75,6 +75,10 @@ The following runtime error occurs when React Redux does not find a store in the > > 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. +### Custom Context and the hooks API + +To access the custom context via the hooks API, you can create custom hooks via the [hook creator functions](../api/hooks.md#custom-context). + ## Multiple Stores [Redux was designed to use a single store](https://redux.js.org/api/store#a-note-for-flux-users).