在Redux Reducer内调用一个动作

Question

我的减速器中的代码如下：

import {ADD_FILTER, REMOVE_FILTER} from "../../../../actions/types";

const removeFilter = (state, name) => {
    return state.filter(f => f.name !== name);
};

export default function addRemoveFilterReducer(state = [], action) {
    switch (action.type) {

        case ADD_FILTER:
            let nState = state;

            if(state.some(i => i.name === action.searchFilter.name))
                nState = removeFilter(state, action.searchFilter.name);

            return [...nState, {name: action.searchFilter.name, values: [action.searchFilter.values]}];

            //Call another action    

        case REMOVE_FILTER:
            return removeFilter(state, action.searchFilter.name);

        default:
            return state;
    }
}

我有一个组件陈列室，而在陈列室中有搜索组件和内容组件。

在搜索组件内部，我处理过滤，并调度一个使用此化简器处理的操作。

添加过滤器后，我想使用所有过滤器调度一个动作。 我怎样才能做到这一点？

该动作将由减速器处理，在该减速器中，我将仅退回那些符合搜索条件的汽车，并将其显示在内容组件中。

我希望你明白我想说的话。

这种方法好吗？

Answer 1

您可以考虑为此使用redux-thunk 。

您将有两个单独的操作，一个用于添加过滤器，另一个用于进行搜索。 您的addFilterAndMakeSearch thunk将负责按顺序调用这些操作。 这样，您就无需从减速器中分派动作。

// Thunk
function addFilterAndMakeSearch(searchFilter) {
  return dispatch => {
    dispatch(addFilter(searchFilter);
    dispatch(makeSearch());
  }
}

// Action Creator One
function addFilter(searchFilter) {
  return {
    type: 'ADD_FILTER',
    payload: searchFilter,
  };
}

// Action Creator Two
function makeSearch() {
  return {
    type: 'MAKE_SEARCH',
  };
}

为了使此工作有效，您需要将addFilterAndMakeSearch用作onSubmit处理程序。

Answer 2

调用动作很可能是副作用操作。 由于减速器应遵循函数式编程原则，因此我认为不应触发任何动作。

要解决您的用例，您仍然可以从触发了减速器更改的位置执行两个操作。 有时我们会在我们的应用程序中这样做。 例如，您的组件可以触发两个动作，或者一个动作可以触发两个Redux存储更新。