Javascript 当我想对redux容器中的数据进行排序或过滤时，如何监视它的状态？ 我有一些数据作为对象数组。我会用redux对其进行排序或过滤，并对redux做出反应。

我的初始状态：

let initialState={
人员：[]，
活动：0，
加载：false，
过滤器：“”，
字段：“名称”，
增加：对
}

您可以尝试以下方法，最好将其保存在一个文件中，然后在连接组件时将其用作选择器

// yourComponentSelector.js

let getPersons = (state) => state.persons
let getFilter = (state) => state.filter
let getField = (state) => state.field
let getIncrease = (state) => state.increase
let getLoading = (state) => state.loading
let getActive = (state) => state.active

let sortData = createSelector(
  [getPersons, getField,getIncrease],
  (persons,field,increase) =>  {
    console.log("SORT");
    let sortarr = persons.slice(0);
    return sortarr.sort((a , b) => {
      if (a[field] > b[field])  return increase ?  1: -1
      if (a[field] < b[field])  return increase ? -1:1
      return 0
    })
  })

function filterData(data, filter) {
   return data.filter(p => {
       console.log("FILTER");
       return p.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1
   });
}

let filterDataSelector = createSelector(
   [sortData, filter],
   (persons, filter) => {
      return filterData(persons, filter)
   })

export const yourComponentSelector = createSelector(
  [filterDataSelector,
   getLoading,
   getActive
  ],
  (persons, loading, active) => {
    return {
       persons: persons,
       activePerson: persons[active],
       loading: loading,
       active: active
    }
  },
)

简言之

---

如果您需要对数据进行排序，它将重新计算filterData，因为sortData已更改，并且您希望筛选最近排序的数据，如果您的筛选器更改，它将重新计算filterData，而不是sortData。重新选择的工作方式是，只有当传递给createSelector的参数之一发生更改时，它才会重新计算状态，因此在构建选择器时请注意这一点。

我认为选择器的输入错误，因此，

filterData

应该是

sortData

的输入，

getPersons

应该是

filterData

的输入：

let sortData = createSelector(
  [filterDataSelector, getField, getIncrease],
  (persons,field,increase) =>  {
    console.log("SORT");
    let sortarr = persons.slice(0);
    return sortarr.sort((a , b) => {
      if (a[field] > b[field])  return increase ?  1: -1
      if (a[field] < b[field])  return increase ? -1:1
      return 0
    })
  })

function filterData(data, filter) {
   return data.filter(p => {
       console.log("FILTER");
       return p.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1
   });
}

let filterDataSelector = createSelector(
   [getPersons, filter],
   (persons, filter) => {
      return filterData(persons, filter)
})

export const yourComponentSelector = createSelector(
  [sortData,
   getLoading,
   getActive
  ],
  (persons, loading, active) => {
    return {
       persons: persons,
       activePerson: persons[active],
       loading: loading,
       active: active
    }
  },
)

让sortData=createSelector(
[filterDataSelector，getField，getIncrease]，
（人员、字段、增加）=>{
控制台日志（“排序”）；
设sortarr=persons.slice（0）；
返回sortarr.sort（（a，b）=>{
如果（a[field]>b[field]）返回增加？1:-1
如果（a[field]{
控制台日志（“过滤器”）；
返回p.name.toLowerCase（）.indexOf（filter.toLowerCase（））！=-1
});
}
让filterDataSelector=createSelector(
[getPersons，过滤器]，
（人员、筛选器）=>{
返回过滤器数据（人员、过滤器）
})
export const yourComponentSelector=createSelector(
[排序数据，
获取加载，
活跃
],
（人员、装载、活动）=>{
返回{
人:人,，
活动人员：人员[活动]，
加载：加载，
活动：活动
}
},
)

能否在storeData中显示其余代码？i、 存储数据是什么样子的，您正在传递到filterData中的数据…？数组“persons”是静态数据。因此，当我单击sort data时，“sort”和“FILTER”一起实现，但它只需要“sort”它们。你能看看我的MapStateTops函数吗？我还添加了我的sortData函数。不幸的是，结果是相同的=（我假设它需要使用react redux的memorizing:

let sortData = createSelector(
  [filterDataSelector, getField, getIncrease],
  (persons,field,increase) =>  {
    console.log("SORT");
    let sortarr = persons.slice(0);
    return sortarr.sort((a , b) => {
      if (a[field] > b[field])  return increase ?  1: -1
      if (a[field] < b[field])  return increase ? -1:1
      return 0
    })
  })

function filterData(data, filter) {
   return data.filter(p => {
       console.log("FILTER");
       return p.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1
   });
}

let filterDataSelector = createSelector(
   [getPersons, filter],
   (persons, filter) => {
      return filterData(persons, filter)
})

export const yourComponentSelector = createSelector(
  [sortData,
   getLoading,
   getActive
  ],
  (persons, loading, active) => {
    return {
       persons: persons,
       activePerson: persons[active],
       loading: loading,
       active: active
    }
  },
)