如何在Redux中管理（異步）級聯數據？

Question

想象一下汽車配置應用程序。 這是一個示例狀態樹：

{
  // selections
  modelYear,
  modelId,
  transmissionId,

  // options
  modelYears: [],
  models: [],
  transmissions: [],
  accessories: []
}

當應用啟動時，它將加載一些初始數據。 然后，您將首先選擇一個模型年份來填充模型列表，然后選擇一個模型，然后選擇一個變速器，配件等。每條數據都以分層的方式依賴於先前的選擇。 頁面加載事件的示例序列如下：

1. 檢索所有年份並填充一個下拉列表。
2. 默認選擇第一年
3. 根據所選年份檢索模型
4. 默認選擇第一個模型
5. 根據所選模型檢索傳輸
6. 默認選擇傳輸
7. 根據所選的型號等檢索配件

當用戶更改對任何數據的選擇時，必須檢索層次結構中較低的新數據，並且必須重新填充UI。

以下是我所寫內容的一些摘要：

行動

export function getModelYears() {
  return dispatch => {
    vehiclesApi.getModelYears(years => {
      dispatch(receiveModelYears(years))
    })
  }
}

export function getModels(year) {
  return dispatch => {
    vehiclesApi.getModels(year, models => {
      dispatch(receiveModels(models))
    })
  }
}

function receiveModelYears(years) {
  return {
    type: types.RECEIVE_MODEL_YEARS,
    years: years
  }
}

function receiveModels(models) {
  return {
    type: types.RECEIVE_MODELS,
    models: models
  }
}

export function selectModelYear(year) {
  return {
    type: types.SELECT_MODEL_YEAR,
    year
  }
}

減速機

function vehicle(state = {}, action) {
  switch (action.type) {
    case SELECT_MODEL_YEAR:
      return Object.assign({}, state, {
        modelYear: action.year
      })
    case SELECT_MODEL:
      return Object.assign({}, state, {
        modelId: action.modelId
      })
    default:
      return state
  }
}  

function modelYears(state = [], action) {
  switch (action.type) {
    case RECEIVE_MODEL_YEARS:
      return state.concat(action.years)
    default:
      return state
  }
}

function models(state = [], action) {
  switch (action.type) {
    case RECEIVE_MODELS:
      return state.concat(action.models)
    default:
      return state
  }
}

我不確定如何構造我的化簡器和操作來處理默認選擇並在選擇后請求新數據。 手動操作很容易（用戶單擊，調度操作）。 但是，如何在默認情況下選擇第一年后如何手動調度getModels(year) ？

這是我用偽代碼描述流程的最佳方法：

store.dispatch(getModelYears())

store.subscribe(() => {
  // if model years received
  store.dispatch(selectModelYear(store.getState().modelYears[0]))

  // if modelYear selected
  store.dispatch(getModels(store.getState().modelYear))

  // if models received
  store.dispatch(selectModel(store.getState().models[0].id))

  // if model selected
  store.dispatch(getTransmissions(store.getState().modelId))
  store.dispatch(getAccessories(store.getState().modelId))

  // ...etc
})

我想測試該系統是否與任何UI框架無關，因為我將其構建為用於管理客戶端狀態的概念證明，並且可能無法使用React。

Answer 1

如果我正確理解了您的要求，那么您正在尋找一種通過觸發其他操作來響應狀態更改的方法。 例如，每當store.modelYear變化，你需要觸發RECEIVE_MODELS行動。

subscription方法適合該工作。 如果你想要一個更結構化的設計，也有建立在頂部模式subscribe ，例如演員： http://jamesknelson.com/join-the-dark-side-of-the-flux-responding-to-actions-with -actors /