Question

我正在使用Redux从后端获取数据。我使用以下方法从智能组件中获取数据：

componentWillMount() {
  this.props.dispatch(fetchPlaces())
}

和我的行动：

export function fetchPlaces() {
  return function(dispatch) {
    dispatch({type: "FETCH_PLACES"});
    let path = "/server/places"

    axios.get(path)
      .then((response) => {
        dispatch({type: "FETCH_PLACES_FULFILLED", payload: response.data})
      })
      .catch((err) => {
        dispatch({type: "FETCH_PLACES_REJECTED", payload: err})
      })
  }
}

和我的减速机：

const reducer = (state={
  places: [],
  isFetching: false,
  error: null
}, action) => {
  switch(action.type) {
    case "FETCH_PLACES" : {
      return { ...state, isFetching: true }
    }
    case "FETCH_PLACES_REJECTED" : {
      return { ...state, isFetching: false, error: action.payload }
    }
    case "FETCH_PLACES_FULFILLED" : {
      return { ...state, isFetching: false, places: action.payload }
    }
    default:
      return state
  }
}

每个地方都有一个名为good_for的属性，这是一个字符串数组。

我现在希望能够通过标签过滤地点（通过已经存在的查询字符串传递）但我需要能够在从数据库中检索地点后直接执行此操作。 / p>

如何以“Redux方式”集成它？

Answer 1

你在问题中提到

我需要能够在从数据库中检索地点后直接执行此操作

如果这意味着data已经在您提取的client方AFTER上，那么您可以使用Array.filter()方法执行此操作。像这样：

// For example your "good_for" field contains the following

const good_for = [ 'place1', 'place2', 'place3' ];

good_for.filter(p => p === 'place2');

希望这有助于^^，

Answer 2

在ajax请求（then）之后的promise axios.get上，您可以在调度到reducer之前先过滤它。

假设来自查询字符串的候选地点被称为goodPlaces，而array of string ex：var goodPlaces = ["germany","japan","russia"]形式，我们正在使用var lo = require('lodash')。

.then((response) => {
  var places = response.data;
  var filtered = lo.filter(places, p=> goodPlaces.indexOf(p) > -1);
  dispatch({type: "FETCH_PLACES_FULFILLED", payload: filtered})
})

当然，您使用的过滤逻辑和工具非常灵活。你只需要在调度之前完成它。

将过滤器应用于ajax数据

2 个答案: