Files
Shaun Hamilton c2a11ad00d feat: add 'back/front end' in curriculum (#42596)
* chore: rename APIs and Microservices to include "Backend" (#42515)

* fix typo

* fix typo

* undo change

* Corrected grammar mistake

Corrected a grammar mistake by removing a comma.

* change APIs and Microservices cert title

* update title

* Change APIs and Microservices certi title

* Update translations.json

* update title

* feat(curriculum): rename apis and microservices cert

* rename folder structure

* rename certificate

* rename learn Markdown

* apis-and-microservices -> back-end-development-and-apis

* update backend meta

* update i18n langs and cypress test

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: add development to front-end libraries (#42512)

* fix: added-the-word-Development-to-front-end-libraries

* fix/added-the-word-Development-to-front-end-libraries

* fix/added-word-development-to-front-end-libraries-in-other-related-files

* fix/added-the-word-Development-to-front-end-and-all-related-files

* fix/removed-typos-from-last-commit-in-index.md

* fix/reverted-changes-that-i-made-to-dependecies

* fix/removed xvfg

* fix/reverted changes that i made to package.json

* remove unwanted changes

* front-end-development-libraries changes

* rename backend certSlug and README

* update i18n folder names and keys

* test: add legacy path redirect tests

This uses serve.json from the client-config repo, since we currently use
that in production

* fix: create public dir before moving serve.json

* fix: add missing script

* refactor: collect redirect tests

* test: convert to cy.location for stricter tests

* rename certificate folder to 00-certificates

* change crowdin config to recognise new certificates location

* allow translations to be used

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* add forwards slashes to path redirects

* fix cypress path tests again

* plese cypress

* fix: test different challenge

Okay so I literally have no idea why this one particular challenge
fails in Cypress Firefox ONLY. Tom and I paired and spun a full build
instance and confirmed in Firefox the page loads and redirects as
expected. Changing to another bootstrap challenge passes Cypress firefox
locally. Absolutely boggled by this.

AAAAAAAAAAAAAAA

* fix: separate the test

Okay apparently the test does not work unless we separate it into
a different `it` statement.

>:( >:( >:( >:(

Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com>
Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
2021-08-13 21:57:13 -05:00

2.9 KiB
Raw Permalink Blame History

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 應返回含 typemessage 兩個鍵的對象。

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));
    }
  }
};