我有一个react / redux应用程序,其中进行了一些过滤和搜索。由于API的设置方式,我必须在接收过滤器然后发送新的搜索查询之间做一些基础工作。因此,我有一个 Activity 过滤器的小引用图,每次我检查或取消检查过滤器时都会更新。问题是,我希望运行该操作以更新过滤器,然后再执行此操作以使用新的过滤器参数调用服务器,并且我不确定此工作流应该如何在redux中进行。
所以我叫该 Action ,然后它以更新的状态命中 reducer ,如下所示:
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
状态,目前看来工作正常。但是我不知道的部分是如何使用更新后的activeFilters调用服务器。现在,我只是从正在使用它的组件中调用此操作。完成后,是否有一种方法可以在 reducer 内链接, promise 或调度其他 Action ?任何有关如何解决此问题的建议将不胜感激。谢谢!
最佳答案
Reducer应该是纯净的,没有副作用,因此您不希望您的Reducer向服务器发出请求或发出其他操作。
如果您使用的是redux-thunk,则可以将函数作为 Action 进行分派(dispatch)。这些功能可以检查商店的状态。这些功能可以自己调度多个常规 Action 。而且,如果您不对Redux更新进行任何形式的批处理,他们可以在分派(dispatch)操作后检查商店,然后执行更多操作。
考虑到以上几点,您可以执行以下操作:
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(..., ...));