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

【问题标题】：Filter products depend on another ACTION in React-native Redux过滤产品依赖于 React-native Redux 中的另一个 ACTION
【发布时间】：2018-01-14 12:21:42
【问题描述】：

我有一个应用程序，它使用 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)有没有一种方法可以过滤我的数据并在 UI 中显示它们并在不使用 ACTIONS 方式？？

B) 如果 A 的回答是否定的！，我如何获取我的 state.data 并在 FILTER_PRODUCTS_BY_CATEGORY_ID 中过滤它们？

谢谢。

【问题讨论】：

标签： reactjs react-native redux react-redux

【解决方案1】：

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

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

我认为为处理此类操作的单一产品创建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, id) => {
	return state.find(c => c.id === id);
};

const result = filterProductsByCategoryId(myData, 2);
console.log(result);

【讨论】：