Представьте конфигурационное приложение для автомобиля. Вот пример дерева состояний:Как управлять (асинхронными) каскадными данными в Redux?
{
// selections
modelYear,
modelId,
transmissionId,
// options
modelYears: [],
models: [],
transmissions: [],
accessories: []
}
Когда приложение запустится, оно загрузит некоторые исходные данные. Затем вы начнете с выбора модельного года для заполнения списка моделей, затем выберите модель, затем трансляцию, аксессуары и т. Д. Каждая часть данных опирается на предыдущий выбор в иерархическом порядке. Пример последовательности событий на загрузке страницы будет следующим:
- Извлеките все годы и заполните раскрывающийся список.
- Выберите первый год по умолчанию
- Получить модели на основе выбранного года
- Выберите первую модель по умолчанию
- Retrieve передач на основе выбранной модели
- Выберите передачу по умолчанию
- Получить принадлежности на основе выбранной модели и т. д.
Когда пользователь меняет выбор y часть данных, новые данные ниже в иерархии должны быть восстановлены, и пользовательский интерфейс должен быть повторно заселен.
Вот некоторые фрагменты того, что я написал:
действие
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
})
Я хотел бы проверить эту систему агностик любых рамок пользовательского интерфейса, так как я строю его в качестве доказательства концепции управления мое состояние клиента и, возможно, не сможет использовать React.