我的reducer中的代码如下:
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;
}
}
我有一个组件展厅,在展厅内我有搜索组件和内容组件。
在搜索组件内部,我处理过滤并派发一个由这个 reducer 处理的 Action 。
添加过滤器后,我想分派(dispatch)一个包含所有过滤器的操作。我怎样才能做到这一点?
该操作将由一个 reducer 处理,我将只返回那些符合搜索条件的汽车并将它们显示在内容组件中。
我希望你明白我想说的。
这种方法好吗?
最佳答案
您可以考虑使用 redux-thunk为此。
您将有两个单独的操作,一个用于添加过滤器,另一个用于进行搜索。您的 addFilterAndMakeSearch thunk 将负责按顺序调用这些操作。通过这种方式,您将不需要从 reducer 发送 action。
// 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 处理程序。
关于javascript - 在 redux reducer 中调用一个 Action ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39368271/