Reactjs 过滤器产品依赖于React native Redux中的另一个操作

我有一个应用程序，可以通过Redux操作从服务器获取所有类别和产品。我需要使用类别Id筛选产品。加载数据操作完成后，我调用另一个操作来筛选产品，但我有点困惑

应用程序的几个部分都有代码：

产品选项：

 export const GET_INITIAL_PRODUCTS_DATA = "GET_INITIAL_PRODUCTS_DATA";
 export const GET_INITIAL_PRODUCTS_DATA_RESULT = "GET_INITIAL_PRODUCTS_DATA_RESULT";  
 export const GET_INITIAL_PRODUCTS_DATA_ERROR = "GET_INITIAL_PRODUCTS_DATA_ERROR";  
 export const FILTER_PRODUCTS_BY_CATEGORY_ID = "FILTER_PRODUCTS_BY_CATEGORY_ID";

 export const getInitialProductsData = () => ({
       type: GET_INITIAL_PRODUCTS_DATA
  });

 export const filterProductsByCategoryId = categoryId => ({
       type: FILTER_PRODUCTS_BY_CATEGORY_ID,
       categoryId
  });

import {
  GET_INITIAL_PRODUCTS_DATA,
  GET_INITIAL_PRODUCTS_DATA_RESULT,
  GET_INITIAL_PRODUCTS_DATA_ERROR,
  FILTER_PRODUCTS_BY_CATEGORY_ID
} from "../actions/products";

const initialState = {
  isFetching: false,
  data: {},
  error: null
};

const filterProductsByCategoryId = (state, action) => {
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_INITIAL_PRODUCTS_DATA:
      return {
        ...state,
        isFetching: true
      };
    case GET_INITIAL_PRODUCTS_DATA_RESULT:
      return {
        ...state,
        isFetching: false,
        data: action.result
      };
    case GET_INITIAL_PRODUCTS_DATA_ERROR:
      return {
        ...state,
        isFetching: false,
        error: action.error
      };
    case FILTER_PRODUCTS_BY_CATEGORY_ID:
      return {
        ...state,
        data: filterProductsByCategoryId(state, action.categoryId)
      };
    default:
      return state;
  }
};

export default reducer;

产品减速器：

 export const GET_INITIAL_PRODUCTS_DATA = "GET_INITIAL_PRODUCTS_DATA";
 export const GET_INITIAL_PRODUCTS_DATA_RESULT = "GET_INITIAL_PRODUCTS_DATA_RESULT";  
 export const GET_INITIAL_PRODUCTS_DATA_ERROR = "GET_INITIAL_PRODUCTS_DATA_ERROR";  
 export const FILTER_PRODUCTS_BY_CATEGORY_ID = "FILTER_PRODUCTS_BY_CATEGORY_ID";

 export const getInitialProductsData = () => ({
       type: GET_INITIAL_PRODUCTS_DATA
  });

 export const filterProductsByCategoryId = categoryId => ({
       type: FILTER_PRODUCTS_BY_CATEGORY_ID,
       categoryId
  });

import {
  GET_INITIAL_PRODUCTS_DATA,
  GET_INITIAL_PRODUCTS_DATA_RESULT,
  GET_INITIAL_PRODUCTS_DATA_ERROR,
  FILTER_PRODUCTS_BY_CATEGORY_ID
} from "../actions/products";

const initialState = {
  isFetching: false,
  data: {},
  error: null
};

const filterProductsByCategoryId = (state, action) => {
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_INITIAL_PRODUCTS_DATA:
      return {
        ...state,
        isFetching: true
      };
    case GET_INITIAL_PRODUCTS_DATA_RESULT:
      return {
        ...state,
        isFetching: false,
        data: action.result
      };
    case GET_INITIAL_PRODUCTS_DATA_ERROR:
      return {
        ...state,
        isFetching: false,
        error: action.error
      };
    case FILTER_PRODUCTS_BY_CATEGORY_ID:
      return {
        ...state,
        data: filterProductsByCategoryId(state, action.categoryId)
      };
    default:
      return state;
  }
};

export default reducer;

下面是我调用过滤器操作的代码：

filterProducts = (title = "A") => {
const _categories = Object.values(this.props.categories);

const selectedCategory = _categories.find(
  category => category.title === title
);
this.props.dispatch(filterProductsByCategoryId(selectedCategory.id));

我的问题是：
A）是否有一种方法可以过滤我的数据，并在UI中显示它们，并在不使用操作的情况下刷新它们

B）如果A的答案是否定的！，如何获取我的state.data并在按类别过滤产品\u ID中过滤它们

谢谢。

您可以使用返回筛选结果。
请记住，这将返回一个数组而不是单个值，如果您在减速器中使用此过滤器，这是一件好事。因为减速器的形状是数组而不是对象。
运行示例：

const myData=[{
名字：'某个名字'，
身份证号码：1
}, {
姓名：'somename2'，
身份证号码：2
}, {
姓名：'somename3'，
身份证号码：3
}, {
姓名：'somename4'，
身份证号码：4
}]
const filterProductsByCategoryId=（状态、操作）=>{
返回状态.filter（c=>c.id==action.categoryId）；
};
const result=filterProductsByCategoryId（myData，{categoryId:2}）；
控制台日志（结果）