freeCodeCamp/curriculum/challenges/chinese/03-front-end-development-libraries/react-and-redux/map-dispatch-to-props.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036146	映射 Dispatch 到 Props	6	301432	map-dispatch-to-props

--description--

mapDispatchToProps() 函数可为 React 组件提供特定的创建 action 的函数，以便组件可 dispatch actions，从而更改 Redux store 中的数据。 该函数的结构跟上一挑战中的mapStateToProps()函数相似， 它返回一个对象，把 dispatch actions 映射到属性名上，该属性名成为props。 然而，每个属性都返回一个用 action creator 及与 action 相关的所有数据调用 dispatch 的函数，而不是返回 state 的一部分。 可以访问 dispatch，因为在定义函数时，我们以参数形式把它传入 mapDispatchToProps() 了，这跟 state 传入 mapStateToProps() 是一样的。 在幕后，React Redux 用 Redux 的 store.dispatch() 来管理这些含 mapDispatchToProps() 的dispatches， 这跟它使用 store.subscribe() 来订阅映射到 state 的组件的方式类似。

例如，创建 action 的函数 loginUser() 把 username 作为 action payload， mapDispatchToProps() 返回给创建 action 的函数的对象如下：

{
  submitLoginUser: function(username) {
    dispatch(loginUser(username));
  }
}

--instructions--

编辑器上提供的是创建 action 的函数 addMessage()。 写出接收 dispatch 为参数的函数 mapDispatchToProps()，返回一个 dispatch 函数对象， 其属性为 submitNewMessage。该函数在 dispatch addMessage() 时为新消息提供一个参数。

--hints--

addMessage 应返回含 type 和 message 两个键的对象。

assert(
  (function () {
    const addMessageTest = addMessage();
    return (
      addMessageTest.hasOwnProperty('type') &&
      addMessageTest.hasOwnProperty('message')
    );
  })()
);

mapDispatchToProps 应为函数。

assert(typeof mapDispatchToProps === 'function');

mapDispatchToProps 应返回一个对象。

assert(typeof mapDispatchToProps() === 'object');

从 mapDispatchToProps 通过 submitNewMessage 分发 addMessage，应向 dispatch 函数返回一条消息。

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--

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

// Change code below this line

--solutions--

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

// Change code below this line

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: function(message) {
      dispatch(addMessage(message));
    }
  }
};