freeCodeCamp/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/redux/use-middleware-to-handle-asynchronous-actions.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036156	使用中間件處理異步操作	6	301451	use-middleware-to-handle-asynchronous-actions

--description--

目前爲止的挑戰都在避免討論異步操作，但它們是 Web 開發中不可避免的一部分。 在某些時候，需要在 Redux 應用程序中使用異步請求，那麼如何處理這些類型的請求？ Redux 中間件專爲此目的而設計，稱爲 Redux Thunk 中間件。 這裏簡要介紹如何在 Redux 中使用它。

如果要使用 Redux Thunk 中間件，請將其作爲參數傳遞給 Redux.applyMiddleware()。 然後將此函數作爲第二個可選參數提供給 createStore() 函數， 看一下編輯器底部的代碼。 然後，要創建一個異步的 action，需要在 action creator 中返回一個以 dispatch 爲參數的函數。 在這個函數中，可以 dispatch action 並執行異步請求。

在此示例中，使用 setTimeout() 模擬異步請求。 通常在執行異步行爲之前 dispatch action，以便應用程序狀態知道正在請求某些數據（例如，這個狀態可以顯示加載圖標）。 然後，一旦收到數據，就會發送另一個 action，該 action 的 data 是請求返回的數據同時也代表 API 操作完成。

請記住，正在將 dispatch 作爲參數傳遞給這個特殊的 action creator。 需要 dispatch action 時只需將 action 直接傳遞給 dispatch，中間件就可以處理其餘的部分。

--instructions--

在 handleAsync() 的 action creator 中編寫兩個 dispatch 事件。 在 setTimeout()（模擬 API 調用）之前 dispatch requestingData()。 然後在收到（模擬）數據後，dispatch receivedData() action，傳入這些數據。 現在已經知道如何處理 Redux 中的異步操作， 其他所有操作都繼續像以前一樣。

--hints--

requestingData action creator 應返回類型和值都爲 REQUESTING_DATA 的對象。

assert(requestingData().type === REQUESTING_DATA);

receivedData action creator 應返回類型和值都等於 RECEIVED_DATA 的對象。

assert(receivedData('data').type === RECEIVED_DATA);

asyncDataReducer 必須是個函數。

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

分發 requestingData 後 action creator 應該將 store 中 state 的 fetching 值更新爲 true。

assert(
  (function () {
    const initialState = store.getState();
    store.dispatch(requestingData());
    const reqState = store.getState();
    return initialState.fetching === false && reqState.fetching === true;
  })()
);

如果要 dispatch handleAsync 應先 dispatch 數據請求的 action，然後在收到請求結果後再 dispatch 接收的數據 action。

assert(
  (function () {
    const noWhiteSpace = __helpers.removeWhiteSpace(handleAsync.toString());
    return (
      noWhiteSpace.includes('dispatch(requestingData())') === true &&
      noWhiteSpace.includes('dispatch(receivedData(data))') === true
    );
  })()
);

--seed--

--seed-contents--

const REQUESTING_DATA = 'REQUESTING_DATA'
const RECEIVED_DATA = 'RECEIVED_DATA'

const requestingData = () => { return {type: REQUESTING_DATA} }
const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }

const handleAsync = () => {
  return function(dispatch) {
    // Dispatch request action here

    setTimeout(function() {
      let data = {
        users: ['Jeff', 'William', 'Alice']
      }
      // Dispatch received data action here

    }, 2500);
  }
};

const defaultState = {
  fetching: false,
  users: []
};

const asyncDataReducer = (state = defaultState, action) => {
  switch(action.type) {
    case REQUESTING_DATA:
      return {
        fetching: true,
        users: []
      }
    case RECEIVED_DATA:
      return {
        fetching: false,
        users: action.users
      }
    default:
      return state;
  }
};

const store = Redux.createStore(
  asyncDataReducer,
  Redux.applyMiddleware(ReduxThunk.default)
);

--solutions--

const REQUESTING_DATA = 'REQUESTING_DATA'
const RECEIVED_DATA = 'RECEIVED_DATA'

const requestingData = () => { return {type: REQUESTING_DATA} }
const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }

const handleAsync = () => {
  return function(dispatch) {
    dispatch(requestingData());
    setTimeout(function() {
      let data = {
        users: ['Jeff', 'William', 'Alice']
      }
      dispatch(receivedData(data));
    }, 2500);
  }
};

const defaultState = {
  fetching: false,
  users: []
};

const asyncDataReducer = (state = defaultState, action) => {
  switch(action.type) {
    case REQUESTING_DATA:
      return {
        fetching: true,
        users: []
      }
    case RECEIVED_DATA:
      return {
        fetching: false,
        users: action.users
      }
    default:
      return state;
  }
};

const store = Redux.createStore(
  asyncDataReducer,
  Redux.applyMiddleware(ReduxThunk.default)
);