React を 触ってみた (7) – 再帰処理 で全ての Taxonomy を 取得する

今までのコードでは per_page=100 を 付けて とりあえず 100件分の タクソノミーを 取得していましたが

今回の修正では 再帰処理を行い 全件取得 してみたいと思います

前回の記事

React を 触ってみた (6) – コンポーネント の 再利用
https://tekuaru.jack-russell.jp/2018/05/02/1788/

---

Taxonomy の 全件取得

---

取得のタイミングによっては 並び順が変わってしまうかもしれませんが 今回は 全件取得が 目標です

---

/src/component-parts/list-taxonomies.jsx : 一部

---

componentWillMount() {
  var taxonomiesURL = this.props.API.default + this.props.API.namespace + this.props.taxonomy + '/'
  this.props.handleLoadTaxonomies(taxonomiesURL, this.props.taxonomy)
}

を

componentWillMount() {
  this.props.handleLoadTaxonomies(this.props)
}

に 修正

今まで URL を 渡していたものを this.props ごと 渡すように 修正します

URLの加工を action側で すべて担うようにするためです

---

/src/redux/containers.jsx : 一部

---

handleLoadTaxonomies: (value, taxonomy) => { dispatch( loadTaxonomies(value, taxonomy) ) },

を

handleLoadTaxonomies: (props) => { dispatch( loadTaxonomies(props) ) },

に 修正

---

/src/redux/actions.jsx : 一部

---

export function loadTaxonomies( value, taxonomy ) {
  return function(dispatch) {
    fetch(value)
      .then(response => response.json())
      .then(result => dispatch(setTaxonomies(result, taxonomy)))
      .catch(error => console.log(error))
    // end fetch
  }
}

export function setTaxonomies( value, taxonomy ) {
  return {
    type: 'SET-TAXONOMIES',
    value,
    taxonomy,
  }
}

を

export function loadTaxonomies(props, page = 1) {
  return function(dispatch) {
    var url = props.API.default + props.API.namespace + props.taxonomy + '/' + '?' + 'page=' + page
    fetch(url)
      .then(
        function(response) {
          if( page < response.headers.get('X-WP-TotalPages') ) {
            dispatch(loadTaxonomies(props, page+1))
          }
          return response.json()
        }
      )
      .then(result => dispatch(setTaxonomies(result, props.taxonomy, page)))
      .catch(error => console.log(error))
    // end fetch
  }
}

export function setTaxonomies(result, taxonomy, page) {
  return {
    type: 'SET-TAXONOMIES',
    result,
    taxonomy,
    page,
  }
}

に 修正

loadTaxonomies と setTaxonomies に page の 引数を 追加しています

handleLoadTaxonomies からは page の 値を 渡さないので 初期値 1 を 指定してあります

loadTaxonomies 内の fetch で レスポンスがあった場合
現在のページ数 と 総ページ数 ( response headers の X-WP-TotalPages ) を 比較し
総ページ数以下だったら もう一度 自分自身を 呼び出して 続きを 取得するようになっています

取得した結果は 今まで通り setTaxonomies に 渡しますが 一緒に ページ数も 渡しています

setTaxonomies では page を そのまま return しています

---

/src/redux/reducers.jsx : case のみ

---

case 'SET-TAXONOMIES':
  console.log( action.taxonomy + ' :' )
  console.log( action.value )
  return Object.assign({}, state, {
    [action.taxonomy]: action.value,
  })

を

case 'SET-TAXONOMIES':
  console.log( action.taxonomy + ' : Page : ' + action.page )
  console.log( action.result )
  return Object.assign({}, state, {
    [action.taxonomy]: ( action.page == 1 ) ? action.result : state[action.taxonomy].concat(action.result),
  })

に 修正

ここでは action.page == 1 の時は action.result を 新たに指定し
それ以外のときは concat によって 元々の値 ( state[action.taxonomy] ) と 新しい値 ( action.result ) を つなぎ合わせています

---

まとめ

---

今回のポイントは 再帰処理 です

再帰処理を 扱えるようになると コードを コンパクトに出来ますが 間違えると 無限ループにもつながる処理なので 気をつけないと いけない所ですね

また 三項演算子 は 可読性が 悪いとかで 好かれていないみたいですが…
僕は 結構 使ってしまいますね

明日は いよいよ 本文部分に 記事を 表示させていきたいと思います