Skip to content

Commit

Permalink
Update 7.x docs with edits from master
Browse files Browse the repository at this point in the history
  • Loading branch information
markerikson committed Apr 16, 2022
1 parent 9306158 commit fee8190
Show file tree
Hide file tree
Showing 5 changed files with 13 additions and 9 deletions.
4 changes: 2 additions & 2 deletions docs/api/connect.md
Expand Up @@ -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.
Expand Down
7 changes: 3 additions & 4 deletions docs/api/hooks.md
Expand Up @@ -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:

Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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/).
````
5 changes: 3 additions & 2 deletions docs/troubleshooting.md
Expand Up @@ -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>`](#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>`](#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

Expand Down
2 changes: 1 addition & 1 deletion docs/tutorials/quick-start.md
Expand Up @@ -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 `<Counter>` component inside, then import that component into `App.js` and render it inside of `<App>`.

```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'
Expand Down
4 changes: 4 additions & 0 deletions docs/using-react-redux/accessing-store.md
Expand Up @@ -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 `<Provider>`, or pass a custom React context provider to `<Provider>` 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).
Expand Down

0 comments on commit fee8190

Please sign in to comment.