Вызов действия внутри Redux редуктора

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.

Answer 2

Для этого вы можете использовать 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 обработчика.