私のアプリケーションは redux を使用して、メンバーの詳細を表示するためにアプリ内の複数のコンポーネント間で共有されるデータの MEMBER オブジェクトなど、redux ストア エンティティ リデューサー内のバックエンド API からのデータを保持しています。現在、フォームからデータを取得し、PUT リクエストとしてバックエンド API に送信するEditProfileコンポーネントを実装しています。リクエストが正常に終了した場合(ここまで完了) 、redux store の現在のメンバー プロファイル エンティティを更新します。このreduxストアの更新に到達するための「ベストプラクティス」のようなものを見つけようとしています. 基本的な API ミドルウェア (Redux の実世界のアプリケーションの例と同様) を実装しましたが、状態を更新してその部分に到達する方法が完全にはわかりません。
バックエンド API は、PUT 要求の後にステータス コードと理由 (エラーの場合) または memberId (成功の場合) のみを返します。バックエンド エンドポイントを変更して、新しいメンバー プロファイル オブジェクトを返すことができません。これは、Web サーバー以外に別の「グローバル」サーバーがあり、これと同じように動作し、変更できないためです。
したがって、フォーム (react-final-form) からのデータを永続化する必要があると思います。(バックエンドからの) memberId を含む応答が成功した場合は、このデータを使用して現在の Redux ストア エンティティ (メンバー プロファイル) を更新します。
更新要求データをストアエンティティリデューサーに保存することを考えていました-> UPDATING_MEMBER_PROFILE のようなキーと id 要求が成功して終了し、この 2 つのオブジェクトを 1 つにマージして UPDATING_ 部分をクリアします。何か提案はありますか？
アップデート：
コードで API を呼び出すには、次のようなアクションがあります。
memberAction.js
export const updateProfile = values => ({
type: API,
payload: {
url: "/members/update",
method: "PUT",
data: values,
meta: {
label: MEMBER_PROFILE,
success: [], // action callbacks onSuccess
error: [] // action callbacks onError
}
}
});
次に、API ミドルウェアが action.type === API を処理し、API_REQUEST、API_SUCCESS、および API_ERROR タイプのアクションを、最初の fetchProfile アクションからのエンティティとラベルで生成します。次のようになります。
apiMiddleware.js
...getting Info from origin action about request here
next(action);
dispatch(apiRequest(entity, label));
return callApi(url, method, data)
.then(response => {
dispatch(apiSuccess(response.status, response, label));
dispatch(success(response)); // Dispatch callbacks...
})
.catch(error => {
dispatch(apiError(response.status, error, label));
dispatch(error(response)); // Dispatch callbacks...
});
ミドルウェアサーバーと別のアクションをディスパッチした後、APIレデューサーはAPIからデータを割り当てて、次のようなエンティティで保存します。
apiReducer.js
const apiEntitiesReducer = (state = {}, action) => {
switch (action.type) {
case API_REQUEST:
return {
...state,
[action.payload.label]: {
error: false,
data: null
}
};
case API_ERROR:
case API_SUCCESS:
return {
...state,
[action.payload.label]: {
error: action.isError,
data: action.payload.data
}
};
default:
return state;
}
};
これらは、単純にするための疑似コードにすぎません (そして、今のところサンクは使用しません...)。したがって、このアプローチで必要なものに到達するには、一時データをストアに保存する場所 (おそらく API ミドルウェア内) が必要です (おそらく別のアクションによって)。