API呼び出しを伴う非同期アクションがある場合、アクションが関数を返す可能性があります：
export function asyncAction(itemId) {
return (dispatch) => {
dispatch(requestStarted());
return sendRequest(itemId).then(
(result) => dispatch(requestSuccess()),
(error) => dispatch(requestFail())
);
};
}
または、オブジェクトを返し、ミドルウェアを使用してそれを傍受し、何かを行います。
export function asyncAction(itemId) {
return {
type: [ITEM_REQUEST, ITEM_REQUEST_SUCCESS, ITEM_REQUEST_FAILURE],
promise: sendRequest(itemId),
userId
};
}
// same middleware found in https://github.com/rackt/redux/issues/99
export default function promiseMiddleware() {
return (next) => (action) => {
const { promise, ...rest } = action;
if (!promise) {
return next(action);
}
next({ ...rest, readyState: 'request' );
return promise.then(
(result) => next({ ...rest, result, readyState: 'success' }),
(error) => next({ ...rest, error, readyState: 'failure' })
);
};
}
ここで私の質問は次のとおりです: asyncAction がディスパッチされる前の状態にロールバックするにはどうすればよいですか。これは基本的に、最後の API 呼び出しを元に戻すための API 呼び出しを使用して、状態 (成功/失敗 => 要求) に2 ステップ戻ることを意味します。
たとえば、todo アイテム (非同期アクション) を削除した後、ポップアップ スナックバーに元に戻すオプションが表示されます。クリックすると、削除された todo アイテムが UI に追加され、db に戻すための API 呼び出しが行われます。
redux-undoを試してみましたが、このような問題を解決するためのものではないと感じています。または、「元に戻す」
を忘れて、ユーザーが元に戻すオプションをクリックしたときに、まったく新しいaddTodoアクションをディスパッチする必要がありますか?
前もって感謝します ：-）