在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存儲更新。