読者です 読者をやめる 読者になる 読者になる

根性駆動開発

備忘録とか日記とか

redux-saga/effectsについてメモ

redux redux-saga axios 非同期処理 javascript フロントエンド

qiita.com

⬆️大体これを読めばわかるけど使用した関数や細かいメモを。

今回自分で使ったのはcall, fork, put, take, selectの五つ。

  • call: promiseの終了を待つ。引数にはpromiseを返す関数を入れる。
  • fork: 別のタスクの開始。 function*から始まる非同期関数を引数にとる。
  • put: actionをdispatchする。
  • take: action、イベントの発生を待つ。actionを待つけど引数に取るのはactionの関数ではなくてaction.typeとなる文字列。
  • select: stateからデータを取り出す。stateを引数にとる関数を引数にとる。

importするときは、

import { call, fork, put, take, select } from 'redux-saga/effects'

のように書く。

以下サンプルコード

//callサンプル
function* callSample(){
    const { result, err } = yield call(getData) //promiseを返す関数
    if(result){
        console.log(result)
    } else {
        console.error(err)
    }
}
/*axiosはpromiseパターンで非同期にhttp通信するライブラリ*/
const getData = () => {
    return axios.get('./get')
        .then( res => {
            const result = res
            return {result} //返して代入する変数名と合わせる
        })
        .catch( err => {
            return {err}
        })
}

callでpromiseを返す関数に引数を与える場合は、以下のような感じ

function* callSample2(){
    const data = {
      name: 'hoge',
      password:'huga'
    }
    const {responce, err} = yield call(postData(data))
}
const postData = (data) => {
    return axios('./post')
        .then( () => { /*処理*/ }
        .catch( () => { /*処理*/ }
}

forkはrootとなるタスクから分岐して処理を書いて行く感じ。

//forkサンプル
export default function* rootSaga(){
    yield fork(forkSample)
}
function* forkSample(){
   //処理
}

putは他の非同期処理の結果に応じてactionをdispatchしたりする時に使う。

//putサンプル
function* putSample(){
    const { result, err } = yield call(getData) 
    if(result){
        yield put(get(result)) //dispatchする
    } else {
        console.error(err)
    }
}

takeはほかの所からdispatchされたら実行される

//takeサンプル
function* takeSample(){
    while(true) {
        const action = yield take("ADD")//typeの文字列を引数にとる
    }
}
//selectサンプル
function* selectSample() {
        const state = yield select(getState)
    }
}

//stateを引数にとる関数
const getState = (state) => ( state )