web-dev-qa-db-ja.com

Redux-Sagaの約束

同じ質問 here が見つかりましたが、適切な回答がないため、探しています。

CRUD操作を使用した簡単なアプリケーションを開発しています。編集ページで、コンポーネントがマウントされた後（componentDidMount()）、アプリは特定の投稿の詳細を取得するアクションをディスパッチします。

dispatch({ type: FETCH_POST, id: 'post-id' })

redux-sagaを使用しており、API応答にアクセスできるように、上記の呼び出しでPromiseを返します。

現在、コールバック/プロミスなしで、ストアで新しい状態（post_editedなど）を定義し、編集ページのコンポーネントのプロップに接続/マッピングしました。

このような状況に対処するための最良の方法は何でしょうか？

reactjspromisereduxredux-saga
8
Ming Soon

問題について詳しく教えてください。問題を正しく理解しているかどうかはわかりませんが、一般的な方法は次のとおりです。

API.js

function apiCallToFetchPost(id) {
  return Promise.resolve({name: 'Test});
}

postSaga.js

function* fetchPostSaga({id}) {
  try {
    const request = yield call(apiCallToFetchPost, id);
    // -> in post reducer we will save the fetched data for showing them later 
    yield put({type: FETCH_POST_SUCCESS, payload: request}); 
  } catch (error) {
    yield put({type: FETCH_POST_SUCCESS_FAILURE, error})
  }
}

export function* onBootstrap() {
  yield takeLatest(FETCH_POST, fetchPostSaga);
}
14
jukben

OPが要求したものを正確に実行するパッケージがあります。つまり、dispatch()がpromiseを返すように調整します。 @ Adob​​e/redux-saga-promise これを使用して、「promiseアクションを定義します"作成者：

_import { createPromiseAction } from '@Adobe/redux-saga-promise'

export const fetchPostAction = createPromiseAction('FETCH_POST')
_

「promiseアクション」のdispatch()はpromiseを返します。

_await dispatch(fetchPostAction({ id: 'post-id' }))
_

サガは次のようになります。

_import { call, takeEvery }        from 'redux-saga/effects'
import { implementPromiseAction } from '@Adobe/redux-saga-promise'

import { fetchPostAction } from './actions'

function * fetchPostSaga(action) {
  yield call(implementPromiseAction, action, function * () {
    const { id } = action.payload
    return yield call(apiCallToFetchPost, id)
  })
}

export function * rootSaga() {
  yield takeEvery(fetchPostAction, fetchPostSaga);
}
_

apiCallToFetchPostから返された値を使用してpromiseを解決するか、apiCallToFetchPostがエラーをスローした場合は拒否します。また、レデューサーでアクセスできる解決/拒否を伴うセカンダリアクションをディスパッチします。パッケージは インストールする必要があるミドルウェア を提供し、それを機能させます。

（免責事項、私は著者です）

0
ronen