React / Redux，chain或promise in reducer [英] React/Redux, chain or promise in reducer

问题描述

我有一个react / redux应用程序，我有一些过滤和搜索。由于API的设置方式，我必须在接收过滤器然后发送新的搜索查询之间做一些基础工作。所以我有一个有效过滤器的小参考图，每次检查或取消选中过滤器时都会更新。问题是，我希望运行更新过滤器的操作，然后在此之后用新的过滤器参数调用服务器的操作，我不确定这个工作流是如何进入redux的。

I have a react/redux app where I have some filtering and searching. Because of how the API's are set up, I have to do a little ground work in between receiving the filters and then sending the new search query. So I have a small reference map of the active filters that updates each time I check or uncheck a filter. The problem is, I would like the action to run that updates the filter, and then the action to call the server with the new filter parameters after that, and I am unsure how this workflow is suppose to go in redux.

所以我调用了这个动作，然后它就像这样更新了一个更新状态 -

So I call the action, then it hits the reducer with an updated state like so -

 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调用服务器。现在我只是从它正在使用的组件中调用这个动作。

So this assembles my activeFilters state, seems to be working ok for now. But the part I can't figure out, is how to have the call the server with using my updated activeFilters. Right now I am just calling this action from the component it is being used in.

有没有办法在reducer中链接，保证或派遣另一个动作这个已经完成了吗？如何处理这个问题的任何建议将非常感激。谢谢！

Is there a way to chain, or promise, or dispatch another action inside the reducer when this one has completed? Any advice in how to approach this would be much appreciated. Thanks!

推荐答案

Reducers应该是纯粹的，没有副作用，所以你不希望你的Reducer向服务器发送请求或者发布其他行动。

Reducers should be pure with no side effects, so you don't want your reducers firing requests to the server or issuing additional actions.

如果您使用的是 redux-thunk ，然后你可以将函数分派为动作。这些功能可以检查商店的状态。这些函数可以自己发送多个常规动作。而且，如果您没有对Redux更新进行任何类型的批处理，他们可以在发布操作后检查商店，然后执行更多操作。

If you are using redux-thunk, then you can dispatch functions as actions. These functions can examine the state of the store. These functions can themself dispatch multiple regular actions. And, if you aren't doing any sort of batching of your Redux updates, they can examine the store after they dispatch an action and then do more stuff.

记住，你可以这样做：

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(..., ...));

这篇关于React / Redux，chain或promise in reducer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！