74 lines
2.4 KiB
Markdown
74 lines
2.4 KiB
Markdown
---
|
||
id: 5a24c314108439a4d4036146
|
||
title: 映射 Dispatch 到 Props
|
||
challengeType: 6
|
||
forumTopicId: 301432
|
||
---
|
||
|
||
# --description--
|
||
|
||
`mapDispatchToProps()`函数可为 React 组件提供特定的创建 action 的函数，以便组件可 dispatch actions，从而更改 Redux store 中的数据。该函数的结构跟上一挑战中的`mapStateToProps()`函数相似，它返回一个对象，把 dispatch actions 映射到属性名上，该属性名成为`props`。然而，每个属性都返回一个用 action creator 及与 action 相关的所有数据调用`dispatch`的函数，而不是返回`state`的一部分。你可以访问`dispatch`，因为在定义函数时，我们以参数形式把它传入`mapDispatchToProps()`了，这跟`state`传入`mapDispatchToProps()`是一样的。在幕后，React Redux 用 Redux 的`store.dispatch()`来管理这些含`mapDispatchToProps()`的dispatches，这跟它使用`store.subscribe()`来订阅映射到`state`的组件的方式类似。
|
||
|
||
例如，创建 action 的函数`loginUser()`把`username`作为 action payload，`mapDispatchToProps()`返回给创建 action 的函数的对象如下：
|
||
|
||
```jsx
|
||
{
|
||
submitLoginUser: function(username) {
|
||
dispatch(loginUser(username));
|
||
}
|
||
}
|
||
```
|
||
|
||
# --instructions--
|
||
|
||
编辑器上提供的是创建 action 的函数`addMessage()`。写出接收`dispatch`为参数的函数`mapDispatchToProps()`，返回一个 dispatch 函数对象，其属性为`submitNewMessage`。该函数在 dispatch `addMessage()`时为新消息提供一个参数。
|
||
|
||
# --hints--
|
||
|
||
`addMessage`应返回含`type`和`message`两个键的对象。
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const addMessageTest = addMessage();
|
||
return (
|
||
addMessageTest.hasOwnProperty('type') &&
|
||
addMessageTest.hasOwnProperty('message')
|
||
);
|
||
})()
|
||
);
|
||
```
|
||
|
||
`mapDispatchToProps`应为函数。
|
||
|
||
```js
|
||
assert(typeof mapDispatchToProps === 'function');
|
||
```
|
||
|
||
`mapDispatchToProps`应返回一个对象。
|
||
|
||
```js
|
||
assert(typeof mapDispatchToProps() === 'object');
|
||
```
|
||
|
||
从`mapDispatchToProps`通过`submitNewMessage`分发`addMessage`，应向 dispatch 函数返回一条消息。
|
||
|
||
```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__'
|
||
);
|
||
})()
|
||
);
|
||
```
|
||
|
||
# --solutions--
|
||
|