`mapDispatch` docs #1066

wgao19 · 2018-10-27T14:35:00Z

What does this PR do?

New doc piece regarding #1001:
_Connect: Dispatch Actions with mapDispatchToProps

Summary of the Changes

Add the mapDispatchToProps docs
Doc site: add mapDispatchToProps to sidebar
Align mapStateToProps names for consistency, add a small section

Arguments

1. state
2. ownProps

section to the mapState doc also for consistency

netlify · 2018-10-27T14:35:49Z

Deploy preview for react-redux-docs ready!

Built with commit 7794a2f

https://deploy-preview-1066--react-redux-docs.netlify.com

markerikson

Looking great so far - almost there! Let's get these changes wrapped up and merge it!

markerikson · 2018-10-27T18:59:19Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+id: connect-dispatching-actions-with-mapDispatchToProps
+title: Connect: Dispatching Actions with mapDispatchToProps
+hide_title: true
+sidebar_label: Connect: Dispatching Actions with mapStateToProps


Suggested change

sidebar_label: Connect: Dispatching Actions with mapStateToProps

sidebar_label: Connect: Dispatching Actions with mapDispatchToProps

Yay, copy-paste issues :)

markerikson · 2018-10-27T19:04:20Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+
+The `mapDispatchToProps` functions are normally referred to as `mapDispatch` for short, and of course the actual variable name doesn’t matter in real code.
+
+## With or Without `mapDispatchToProps`


Suggested change

## With or Without `mapDispatchToProps`

## Approaches for Dispatching

markerikson · 2018-10-27T19:05:00Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+- By default, a connected component receives `props.dispatch` and can dispatch actions itself.
+- `connect` can accept an argument called `mapDispatchToProps`, which lets you create functions that dispatch when called, and pass those functions as props to your component.
+
+The `mapDispatchToProps` functions are normally referred to as `mapDispatch` for short, and of course the actual variable name doesn’t matter in real code.


Suggested change

The `mapDispatchToProps` functions are normally referred to as `mapDispatch` for short, and of course the actual variable name doesn’t matter in real code.

The `mapDispatchToProps` functions are normally referred to as `mapDispatch` for short, but the actual variable name used can be whatever you want.

markerikson · 2018-10-27T19:05:39Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+}
+```
+
+### Providing A `mapDispatchToProps`


Suggested change

### Providing A `mapDispatchToProps`

### Providing A `mapDispatchToProps` Parameter

markerikson · 2018-10-27T19:06:42Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+#### More Declarative
+
+First, encapsulating the dispatch logic into function makes the implementation more declarative.
+Dispatching an action and let the Redux store handle the data flow is _how to_ implement the feature, it is not _what_ it does.


Suggested change

Dispatching an action and let the Redux store handle the data flow is _how to_ implement the feature, it is not _what_ it does.

Dispatching an action and letting the Redux store handle the data flow is _how to_ implement the behavior, rather than _what_ it does.

markerikson · 2018-10-27T19:26:02Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+  return {
+    dispatch,
+    ...bindActionCreators(
+      {


Collapse object.

markerikson · 2018-10-27T19:28:00Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+
+// or
+export default connect(
+  null,


Suggested change

null,

mapState,

Might as well be consistent.

markerikson · 2018-10-27T19:28:38Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+  return {
+    dispatch,
+    ...bindActionCreators(
+      {


Collapse object :)

(Hey, you were consistent :) )

Haha, that's my prettier 😅

markerikson · 2018-10-27T19:29:17Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+
+### Can I `mapDispatchToProps` without `mapStateToProps` in Redux?
+
+Yes. You can skip the first parameter by passing `undefined` or `null`. Your component will not subscribe to the store, and gain dispatch props defined by `mapStateToProps`.


Suggested change

Yes. You can skip the first parameter by passing `undefined` or `null`. Your component will not subscribe to the store, and gain dispatch props defined by `mapStateToProps`.

Yes. You can skip the first parameter by passing `undefined` or `null`. Your component will not subscribe to the store, and will still receive the dispatch props defined by `mapStateToProps`.

markerikson · 2018-10-27T19:31:08Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+
+### Can I call `store.dispatch`?
+
+It is an anti-pattern to use `store.dispatch` which you may retrieve from the `store` in context. As explained in [Redux's FAQ on store setup](https://redux.js.org/faq/storesetup#can-or-should-i-create-multiple-stores-can-i-import-my-store-directly-and-use-it-in-components-myself), any direct access of the store in a component is not recommended, whether it be via direct import or from context. Let React-Redux’s `connect` handle the access to the store, and use the `dispatch` it passes to the props to dispatch actions.


Suggested change

It is an anti-pattern to use `store.dispatch` which you may retrieve from the `store` in context. As explained in [Redux's FAQ on store setup](https://redux.js.org/faq/storesetup#can-or-should-i-create-multiple-stores-can-i-import-my-store-directly-and-use-it-in-components-myself), any direct access of the store in a component is not recommended, whether it be via direct import or from context. Let React-Redux’s `connect` handle the access to the store, and use the `dispatch` it passes to the props to dispatch actions.

It's an anti-pattern to interact with the store directly in a React component, whether it's an explicit import of the store or accessing it via context (see the [Redux FAQ entry on store setup](https://redux.js.org/faq/storesetup#can-or-should-i-create-multiple-stores-can-i-import-my-store-directly-and-use-it-in-components-myself) for more details). Let React-Redux’s `connect` handle the access to the store, and use the `dispatch` it passes to the props to dispatch actions.

markerikson · 2018-10-27T19:42:30Z

Other side note, maybe for another PR: I'd really like to have the generated URLs be shorter, like /docs/using-react-redux/mapdispatch or something. (Or even drop the /docs/ part.)

markerikson

A few more tweaks:

markerikson · 2018-10-27T19:45:08Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+};
+```
+
+You may take this chance to forward arguments to your action creators:


Suggested change

You may take this chance to forward arguments to your action creators:

You will also likely want to forward arguments to your action creators:

markerikson · 2018-10-27T19:46:51Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+
+1. A **`function`** (an action creator) or an **`object`** (each field an action creator)
+2. `dispatch`
+


Suggested change

The wrapper functions generated by `bindActionCreators` will automatically forward all of their arguments, so you don't need to do that by hand.

markerikson · 2018-10-27T19:47:42Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+const reset = () => ({ type: "RESET" });
+
+// binding an action creator
+// returns () => dispatch(increment())


Suggested change

// returns () => dispatch(increment())

// returns (...args) => dispatch(increment(...args))

Can maybe skip doing this for the rest of them?

markerikson · 2018-10-27T19:48:12Z

docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md

+);
+// returns
+// {
+//   increment: () => dispatch(increment()),


Eh, let's go ahead and show all the ...args in these comments after all.

markerikson · 2018-10-27T19:49:59Z

Also, I am so excited to get this page published soon :)

markerikson · 2018-10-28T17:38:21Z

Awesome. Do it!

* Consistent naming for `mapStateToProps` * Add `mapDispatch` docs * Doc site configuration changes * Review resolutions

wgao19 added 3 commits October 27, 2018 22:25

Consistent naming for mapStateToProps

6fcfdc2

Add mapDispatch docs

701e2ff

Doc site configuration changes

d41a5c1

markerikson requested changes Oct 27, 2018

View reviewed changes

Review resolutions

7794a2f

wgao19 force-pushed the docs/dispatching-actions-with-mapdispatch branch from 9a14bef to 7794a2f Compare October 28, 2018 17:26

markerikson merged commit 7458311 into reduxjs:master Oct 28, 2018

albertodev7 pushed a commit to albertodev7/react-redux that referenced this pull request Dec 8, 2022

mapDispatch docs (reduxjs#1066)

cdf967b

* Consistent naming for `mapStateToProps` * Add `mapDispatch` docs * Doc site configuration changes * Review resolutions

	sidebar_label: Connect: Dispatching Actions with mapStateToProps
	sidebar_label: Connect: Dispatching Actions with mapDispatchToProps


		The `mapDispatchToProps` functions are normally referred to as `mapDispatch` for short, and of course the actual variable name doesn’t matter in real code.

		## With or Without `mapDispatchToProps`

	## With or Without `mapDispatchToProps`
	## Approaches for Dispatching

	### Providing A `mapDispatchToProps`
	### Providing A `mapDispatchToProps` Parameter

	Dispatching an action and let the Redux store handle the data flow is _how to_ implement the feature, it is not _what_ it does.
	Dispatching an action and letting the Redux store handle the data flow is _how to_ implement the behavior, rather than _what_ it does.


		### Can I `mapDispatchToProps` without `mapStateToProps` in Redux?

		Yes. You can skip the first parameter by passing `undefined` or `null`. Your component will not subscribe to the store, and gain dispatch props defined by `mapStateToProps`.


		### Can I call `store.dispatch`?

		It is an anti-pattern to use `store.dispatch` which you may retrieve from the `store` in context. As explained in [Redux's FAQ on store setup](https://redux.js.org/faq/storesetup#can-or-should-i-create-multiple-stores-can-i-import-my-store-directly-and-use-it-in-components-myself), any direct access of the store in a component is not recommended, whether it be via direct import or from context. Let React-Redux’s `connect` handle the access to the store, and use the `dispatch` it passes to the props to dispatch actions.

	You may take this chance to forward arguments to your action creators:
	You will also likely want to forward arguments to your action creators:


		1. A `function` (an action creator) or an `object` (each field an action creator)
		2. `dispatch`



	The wrapper functions generated by `bindActionCreators` will automatically forward all of their arguments, so you don't need to do that by hand.

	// returns () => dispatch(increment())
	// returns (...args) => dispatch(increment(...args))

Uh oh!

mapDispatch docs #1066

mapDispatch docs #1066

Uh oh!

Conversation

wgao19 commented Oct 27, 2018

What does this PR do?

Summary of the Changes

Uh oh!

netlify bot commented Oct 27, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

markerikson left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

markerikson commented Oct 27, 2018

Uh oh!

markerikson left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

markerikson commented Oct 27, 2018

Uh oh!

markerikson commented Oct 28, 2018

Uh oh!

Uh oh!

`mapDispatch` docs #1066

`mapDispatch` docs #1066

netlify bot commented Oct 27, 2018 •

edited

Loading