ee1e8abd87
* feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
108 lines
3.1 KiB
Markdown
108 lines
3.1 KiB
Markdown
---
|
|
id: 5a24c314108439a4d4036146
|
|
title: Map Dispatch to Props
|
|
challengeType: 6
|
|
forumTopicId: 301432
|
|
dashedName: map-dispatch-to-props
|
|
---
|
|
|
|
# --description--
|
|
|
|
The `mapDispatchToProps()` function is used to provide specific action creators to your React components so they can dispatch actions against the Redux store. It's similar in structure to the `mapStateToProps()` function you wrote in the last challenge. It returns an object that maps dispatch actions to property names, which become component `props`. However, instead of returning a piece of `state`, each property returns a function that calls `dispatch` with an action creator and any relevant action data. You have access to this `dispatch` because it's passed in to `mapDispatchToProps()` as a parameter when you define the function, just like you passed `state` to `mapStateToProps()`. Behind the scenes, React Redux is using Redux's `store.dispatch()` to conduct these dispatches with `mapDispatchToProps()`. This is similar to how it uses `store.subscribe()` for components that are mapped to `state`.
|
|
|
|
For example, you have a `loginUser()` action creator that takes a `username` as an action payload. The object returned from `mapDispatchToProps()` for this action creator would look something like:
|
|
|
|
```jsx
|
|
{
|
|
submitLoginUser: function(username) {
|
|
dispatch(loginUser(username));
|
|
}
|
|
}
|
|
```
|
|
|
|
# --instructions--
|
|
|
|
The code editor provides an action creator called `addMessage()`. Write the function `mapDispatchToProps()` that takes `dispatch` as an argument, then returns an object. The object should have a property `submitNewMessage` set to the dispatch function, which takes a parameter for the new message to add when it dispatches `addMessage()`.
|
|
|
|
# --hints--
|
|
|
|
`addMessage` should return an object with keys `type` and `message`.
|
|
|
|
```js
|
|
assert(
|
|
(function () {
|
|
const addMessageTest = addMessage();
|
|
return (
|
|
addMessageTest.hasOwnProperty('type') &&
|
|
addMessageTest.hasOwnProperty('message')
|
|
);
|
|
})()
|
|
);
|
|
```
|
|
|
|
`mapDispatchToProps` should be a function.
|
|
|
|
```js
|
|
assert(typeof mapDispatchToProps === 'function');
|
|
```
|
|
|
|
`mapDispatchToProps` should return an object.
|
|
|
|
```js
|
|
assert(typeof mapDispatchToProps() === 'object');
|
|
```
|
|
|
|
Dispatching `addMessage` with `submitNewMessage` from `mapDispatchToProps` should return a message to the dispatch function.
|
|
|
|
```js
|
|
assert(
|
|
(function () {
|
|
let testAction;
|
|
const dispatch = (fn) => {
|
|
testAction = fn;
|
|
};
|
|
let dispatchFn = mapDispatchToProps(dispatch);
|
|
dispatchFn.submitNewMessage('__TEST__MESSAGE__');
|
|
return (
|
|
testAction.type === 'ADD' && testAction.message === '__TEST__MESSAGE__'
|
|
);
|
|
})()
|
|
);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```jsx
|
|
const addMessage = (message) => {
|
|
return {
|
|
type: 'ADD',
|
|
message: message
|
|
}
|
|
};
|
|
|
|
// Change code below this line
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```jsx
|
|
const addMessage = (message) => {
|
|
return {
|
|
type: 'ADD',
|
|
message: message
|
|
}
|
|
};
|
|
|
|
// Change code below this line
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
return {
|
|
submitNewMessage: function(message) {
|
|
dispatch(addMessage(message));
|
|
}
|
|
}
|
|
};
|
|
```
|