React/Redux, цепь или обещание в редукторе

Question

У меня есть приложение response/redux, где у меня есть фильтрация и поиск. Из-за того, как настроены API, я должен сделать небольшую работу по работе между получением фильтров и последующей отправкой нового поискового запроса. Поэтому у меня есть небольшая справочная карта активных фильтров, которая обновляется каждый раз, когда я проверяю или снимаю флажок. Проблема в том, что я хотел бы запустить действие, которое обновляет фильтр, а затем действие, чтобы вызвать сервер с новыми параметрами фильтра после этого, и я не уверен, как этот рабочий процесс должен идти в redux.

Так я называю действие, то он попадет в редуктор с обновленным состоянием, как так -

case actions.TOGGLE_FILTER: 
      return toggleFilter(state, action); 


var toggleFilter = function(state, action){ 
var currentFilters = state.toJS().activeFilters || {}; 
var removeFilterFromActive = function(item) { 
    if(item != action.filter.search){ 
     return; 
    } 
} 
//already exists, remove from list (toggle off) 
if (currentFilters[action.filterGroup.parentSearch] && currentFilters[action.filterGroup.parentSearch].indexOf(action.filter.search) > -1) { 
    var itemIndex = currentFilters[action.filterGroup.parentSearch].indexOf(action.filter.search); 
    currentFilters[action.filterGroup.parentSearch].splice(itemIndex, 1); 
} else { 
    //add to obj 
    var newObj = {}; 
    if (currentFilters[action.filterGroup.parentSearch]) { 
     currentFilters[action.filterGroup.parentSearch].push(action.filter.search); 
    } else { 
     newObj[action.filterGroup.parentSearch] = []; 
     newObj[action.filterGroup.parentSearch].push(action.filter.search); 
     _.extend(currentFilters, newObj); 
    } 
} 
return state.set('activeFilters', fromJS(currentFilters)); 
}; 

Так это компонует мое activeFilters состояния, кажется, работает нормально сейчас. Но часть, которую я не могу понять, заключается в том, как вызвать вызов сервера с помощью моих обновленных активных фильтров. Прямо сейчас я просто вызываю это действие из компонента, в котором он используется.

Есть ли способ связать или пообещать или отправить другое действие внутри редуктора, когда это завершено? Любые советы в отношении того, как подойти к этому, будут высоко оценены. Благодаря!

Answer 1

Редукторы должны быть чистыми без побочных эффектов, поэтому вы не хотите, чтобы ваши редукторы запускали запросы на сервер или выдавали дополнительные действия.

Если вы используете redux-thunk, то вы можете отправлять как действия. Эти функции могут проверять состояние хранилища. Эти функции могут самостоятельно отправлять несколько регулярных действий. И, если вы не выполняете какие-либо доработки обновлений Redux, они могут осмотреть магазин после того, как они отправят действие, а затем сделают больше вещей.

С учетом вышесказанного, можно сделать что-то вроде этого:

function createToggleFilterAndQueryServerAction(filterGroup, filter) { 
    return (dispatch, getState) => { 
     // first dispatch the filter toggle 
     // if you do not have any batching middleware, this 
     // should run the reducers and update the store 
     // synchronously 
     dispatch(createToggleFilter(filterGroup, filter)); 

     // Now get the updated filter from the store 
     const activeFilter = getState().activeFilter; 

     // now query the server 
     callServer(activeFilter).then(result => { 
      // Now dispatch an action with the result from the server 
      dispatch(createServerResponseAction(result)); 
     }); 
    }; 
} 

Использование:

dispatch(createToggleFilterAndQueryServerAction(..., ...));