redux-form/redux-form

PR request: documentation for redux-saga

Open

#3,235 opened on 2017年7月23日

GitHub で見る
 (17 comments) (4 reactions) (0 assignees)JavaScript (12,592 stars) (1,683 forks)batch import
docshelp wanted

説明

I would like to submit an example of how to use redux-form with redux-saga

I was reading one of the issues on how to use redux-saga with redux-form:

https://github.com/erikras/redux-form/issues/2227

It's pretty straightforward if an example is documented. I think something along the lines below is in the issue thread but it would be nice to have it in the docs also:

Form:

<form onSubmit={handleSubmit(dispatchFormSubmit)}>

...
MyForm = reduxForm({
  form: 'nameOfMyForm'
})(MyForm)

dispatchFormSubmit:

const dispatchFormSubmit = (payload, dispatch) => {
  return dispatch({type: 'FORM_ACTION_NAME', payload})
  )
}

Sagas

** watcher saga**

import { startSubmit, stopSubmit } from 'redux-form'
import { call, take, put } from 'redux-saga/effects'

function* watcherSagaFlow() {
   while(true) {
      const someAction = yield take( 'FORM_ACTION_NAME')
      yield put(startSubmit('nameOfMyForm'))
      const result = yield call(someApi, someAction.payload)
      const { error } = result
     
      if (!error) {
        yield put({ type: 'FORM_IS_SUCCESSFUL', payload: true })
         yield put(stopSubmit('nameOfMyForm'))
      } else {
         yield put(stopSubmit('nameOfMyForm', error))
      }
   }
}

worker saga:

function* someApi(payload) {
   try {
     yield call(fetch, 'some-url')
     return { success: true}
   } catch (error) {
    // send error back to watcher saga, which will return it to redux-form via
    // the stopSubmit action creator
    return { error: error }
   }
}

Possibly with better naming than what I mentioned above ... but something along these lines.

コントリビューターガイド