2

オブジェクトの配列としていくつかのデータがあります。redux と react-redux でソートまたはフィルタリングします。

私の初期状態: 

let initialState = {
  persons:[],
  active:0,
  loading:false,
  filter:"",
  field:"name",
  increase:true
}

フィルタリングとソートはUIの扱いなので、コンテナ（スマートコンポーネント）に実装しようとします。過去数日間 redux,react-redux のドキュメントを読んでいて、reselectを使用する必要があることがわかりました。そこで、2 つのセレクターを作成しました。並べ替えられた最新のデータ配列を格納する sortData と、フィルター処理された最新のデータ配列を格納するfilterDataです。

セレクターの引数 - セレクター監視のフィールド:

let getPersons = (state) => state.persons
let getFilter = (state) => state.filter
let getField = (state) => state.field
let getIncrease = (state) => state.increase

sortData :

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

フィルターデータ:

let filterData = createSelector(
  [sortData,getFilter],
  (persons,filter) => {
    return persons.filter( p =>{
      console.log("FILTER");
      return p.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1
    })
  },
)
上記のように、私のセレクターfilterDataはsortDataに依存していますが、その逆ではありません。filterData を呼び出すときはフィルター計算のみを呼び出しますが、データを並べ替えようとすると、並べ替えとフィルターの両方を呼び出します。

私のmapStateToProps :

let mapStateToProps = (state) =>{
  let modernState = filterData(state)
  return {
      activePerson:modernState[state.active],
      persons:modernState,
      loading:state.loading,
      active:state.active
    }
}
「データのフィルター」をクリックすると、最新の並べ替えられた配列をフィルター処理し、「データの並べ替え」をクリックすると、最新のフィルター処理された配列を並べ替えます。 私の質問:

  1. 再計算せずにこの機能を作成するにはどうすればよいですか?
  2. reselectなしで実装できますか?

PSダン・アブラモフの例を読みましたが、残念ながら、それを自分のタスクの解決に適用することはできませんでした. その他のコード:ここにリンクの説明を入力してください

4

2 に答える 2

0

セレクターへの入力が間違っていると思うので、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
    }
  },
)
于 2016-04-25T23:27:43.290 に答える