设置后如何立即使用Redux状态

Question

我要为用户输入信息并创建一个过滤器，然后将过滤器添加到redux中，但是在添加过滤器之后，我需要创建一个搜索查询以发送到后端...因此在创建搜索时查询并将其添加到redux中，直到3次重新发布

，我的其他组件才看到更新

我试图更改我在reducer中设置数据的方式，但似乎无济于事

//reducer.ts
switch (action.type) {
    case LOAD_PRODUCT_DATA:
      return Object.assign({}, state, {
        products: {
          productList: state.products.productList = action.payload.productList.slice(0),
          count: state.products.count = action.payload.count
        }
      });
    case ADD_FILTER:
      const duplicateFilter: Array<any> = state.filteringItems.map((filter: any, index: number) => {
        if (filter.header === action.payload.header) {
          console.log('duplicate');
          const filterList = [state.filteringItems, action.payload];
          filterList.splice(index, 1);
          return filterList;
        }
      });
      if (duplicateFilter.length) {
        return Object.assign({}, state, {
          filteringItems: state.filteringItems = duplicateFilter[0].splice(0)
        });
      } else {
        console.log('no duplicate');
        return Object.assign({}, state, {
          filteringItems: state.filteringItems.concat(action.payload)
        });
      }
    case REMOVE_FILTER:
      const filterList = state.filteringItems.filter((item, itemIndex) => {
        return action.payload !== itemIndex;
      });
      return Object.assign({}, state, {
        filteringItems: filterList
      });
    case CLEAR_ALL:
      return Object.assign({}, state, {
        filteringItems: []
      });
    case FILTER_QUERY:
      return Object.assign({}, state, {
        filteringQuery: action.payload
      });
    default:
      return state;
  }

//ProductDashboard.tsx
  const { products, filteringQuery } = useSelector(
    (state: InitialState): StateProps => ({
      filteringQuery: state.filteringQuery,
      products: {
        productList: state.products.productList,
        count: state.products.count
      }
    })
  );

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getProductDashboard(filteringQuery));
  }, [filteringQuery]);

//FilterCompponent.tsx
  const [input, setInput] = useState<string>('');
  const [queryParams, setQueryParams] = useState<string>('?limit=50&page=0');
  const [open, setOpen] = useState<boolean>(false);
  const dispatch: Dispatch = useDispatch();
  const { filteringItems } = useSelector(
    (state: InitialState): StateProps => ({
      filteringItems: state.filteringItems
    })
  );

  const handleQueryParams = () => {
    if (filteringItems.length > 0) {
      filteringItems.map((filter: Filter) =>
        setQueryParams(`${queryParams}&${filter.header}=${filter.name}`)
      );
    }
    dispatch(queryFilter(queryParams));
  };

  const handleFilter =  (e?: any) => {
    const cleanedUpInput = input.trim();
    dispatch(addFilteringItem({ name: cleanedUpInput, header: props.header }));
    handlePopup();
    handleQueryParams();
  };

当我在productDashboard中的console.log（filteringQuery）出现一个空数组时，直到我再添加3个过滤器，然后在第三个过滤器上，filterQuery都会返回我输入的第一个过滤器。