React.js+redux構成でaction内でstateを参照する方法

toptal-blog-image-1455721413647-0033c9550aed2013dfcd8c512a0af749

Gakuです(*´Д`)

また、最近ちょこちょこReact.js触っているのですが、action内でstateを参照できる方法を知って、劇的に世界が広がった気がしたのでその方法を備忘録程度に掲載したいと思います。

今までの実装

今までaction内でstateにアクセスする場合、こんな感じで記述していました。

import {playMusic} from './playMusic'

//componentからstateを渡してあげる
export const playNextMusic = (state) =>{
    const searchList = state.searchList
    let nextFlg = false 
    let nextVideoId = ""
    searchList.some((v,i) =>{
      if(nextFlg){
        nextVideoId = v.videoId 
        return true
      }
      if(v.playing == true)
        nextFlg = true
    })
    return {
      type: 'NEXT_MUSIC',
      resutl: searchList
    }
  }
}

こんな感じですね。
componentからstateを渡してあげて、actionで参照するといった感じです。
「動く」ことはしますが、componentで無駄な「stateを渡す」といった処理を記述する必要があり、システムが大きくなるとなかなか厳しいものがありました。

劇的に世界が広がった実装

そこでいろいろ調べていると、下記のような形で実装している例を見つけました。

import {playMusic} from './playMusic'

export const playNextMusic = () =>{
  return (dispatch,getState) =>{
    //次の動画を抽出する
    const searchList = getState().searchList
    let nextFlg = false 
    let nextVideoId = ""
    searchList.some((v,i) =>{
      if(nextFlg){
        nextVideoId = v.videoId 
        return true
      }
      if(v.playing == true)
        nextFlg = true
    })
    dispatch(playMusic(nextVideoId))
  }
}

このようにすることで、componentから無駄なstateを渡す必要がなく、「更新に必要な情報のみを渡す」といった実装ができるので大変便利です。
また、私の中で「stateの更新内容記述場所」をreducerかactionかで非常に悩んでいたんですが、この記述方法を知ったことで、完全に「action」とすることができるようになりました。
あと、「dispatch」も使用できる点も気にいっています。

おわりに

reduxのExample眺めていれば、この記述しているのに完全に見落としていた。。。
精進します(*´Д`)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です