Question

我有一个应用程序，通过 Redux ACTIONS 从服务器获取所有类别和产品。我需要过滤带有类别ID的产品。在加载数据操作完成后，我调用另一个操作来过滤产品，但我有点困惑。

该应用程序的代码很少：

ProductsActions：

 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
  });

ProductsReducers：

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）是否有办法过滤我的数据并在用户界面中显示它们并刷新它们而不使用 ACTIONS 方式??

B）如果A的回答是“否”，我如何获取state.data并过滤 FILTER_PRODUCTS_BY_CATEGORY_ID ？

感谢。

Answer 1

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

axis=1

我认为为处理此类操作的单一产品创建selector更为合适，这样您就可以返回一个对象，而不是一个包含一个产品的数组。<登记/> 更不用说使用reselect来做一些memoizations的好处了对于此任务，您可以使用Array.prototype.find()：

const myData = [{
  name: 'some name',
  id: 1
}, {
  name: 'some name2',
  id: 2
}, {
  name: 'some name3',
  id: 3
}, {
  name: 'some name4',
  id: 4
}]

const filterProductsByCategoryId = (state, action) => {
	return state.filter(c => c.id === action.categoryId);
};

const result = filterProductsByCategoryId(myData, {categoryId: 2});
console.log(result);

过滤产品依赖于React-native Redux中的另一个ACTION

1 个答案: