redux-sagaにディスパッチするすべてのアクション（リクエスト後の成功/失敗）を待つ方法は？

Question

I持って次のアクション：

export function createRequest(inputValues) { 
    return { 
    type: actions.PERSON_CREATE_REQUEST, 
    payload: { 
     inputValues 
    } 
    }; 
} 

export function createSuccess(person) { 
    return { 
    type: actions.PERSON_CREATE_SUCCESS, 
    payload: { 
     person: person 
    } 
    }; 
} 

export function createFailure(error) { 
    return { 
    type: actions.PERSON_CREATE_FAILURE, 
    payload: { 
     error 
    } 
    }; 
} 

佐賀：PERSON_CREATE_FAILUREまたはPERSON_CREATE_SUCCESSが派遣された場合、私は確認したい

handleSubmit = async (event, values) => { 
    event.preventDefault(); 
     await store.dispatch(action.createRequest(values)); 
     if (this.props.error === null) { 
     store.dispatch(reset(this.props.form)); 
     } 
    }; 

await store.dispatch(action.createRequest(values));後：提出フォームで呼び出され

export function* createPerson(action) { 
    try { 
    const data = yield call((async() => { 
     const person = action.payload.inputValues; 
     return await api.post(person); 
    })); 
    yield put(createSuccess(data)); 
    } catch (error) { 
    yield put(createFailure(error)); 
    } 
} 


export function* watchCreatePerson() { 
    yield takeEvery('PERSON_CREATE_REQUEST', createPerson); 
} 

export function* rootSaga() { 
    yield [ 
    fork(watchCreatePerson), 
    ]; 
} 

機能。 PERSON_CREATE_FAILUREで、小道具にマップされている店舗にerrorを設定しました。しかし、PERSON_CREATE_REQUESTが送出された後にコードの次の行がifが呼び出されます。しかし、私はPERSON_CREATE_FAILUREまたはPERSON_CREATE_SUCCESSディスパッチまで待つ必要があります。そのアクションを待つために佐賀を変更するにはどうすればよいですか？

Answer 1

handleSubmitの機能では、createRequestアクションを送信するだけで、コードのこの時点で応答を待ってはいけません。

要求が失敗した場合は、PERSON_CREATE_FAILUREアクションを処理するレデューサーを作成します。このレデューサー内で、アプリケーションの状態を適切に設定する、つまりフォームの状態をリセットすることができます。その後、フォームを含むコンポーネントにMapStateToPropsを使用すると、フォームは更新された（この場合はリセットされた）フォーム状態に一致するように自動的に再描画されます。

この方法では、フォームの状態をReduxストアに作成する必要がありますが、そうすることでアプリケーションの状態ライフサイクルが簡素化されることに注意してください。