2016-06-15 6 views
3

ユーザーを認証するためにOauth2「リダイレクトフロー」を使用するアプリケーションがあります。つまり、ユーザーはログインするために別のWebサイトにリダイレクトされ、自分のサイトにリダイレクトされます。状態に影響を与えないReduxアプリのビジネスロジック?

ドキュメントやその他の情報源はすべて、ビジネスロジックがアクションクリエイターまたはレデューサーのいずれかに行かなければならないと主張しているようです。しかし、私はlogin()関数を持っていますが、何らかの形で状態を変更することはありません。アプリケーションの現在の状態をlocalStorageのプレーンオブジェクトとして保存し、ユーザーを認証サーバーにリダイレクトします。ユーザーがログインしてリダイレクトされると、状態は(別のコードによって)復元され、ストアの作成者関数に初期状態として供給されます。

私の質問:login関数のロジックは、単に状態を取得しますが、それはどのような方法でも変更しないので、それはレデューサーに属しません。また、アクション作成者の定義であるアクションは返されません。私のアプリケーション構造のどこに置くべきですか?

アクションクリエイターを実際に作成していないのは「いいですか?私はredux-thunkでこれをやっています(私にはgetState()が必要です)、問題なく動作しますが、実際には "アクション作成者"ではないので間違っていると感じます。また、logout()という機能もあります彼らは同じ場所に住んでいるように感じるように行動を返します。私はそれが一種のコーナーケースだと思いますが、このように州を保存し、訪問者を他のサイトにリダイレクトする理由はたくさんあると思うからです(あるいは、リダイレクトせずに状態を保存するだけでも)。

PS。私は、私のreduxストアをlocalStorageと自動的に同期させるためのライブラリがあることを知っていますが、これは質問のポイントではありません。

EDIT:いくつかの明確化:ビジネス・ロジックを置くことについてのRedux docsから

ロジックの部分が減速またはアクションの作成者に行く必要があります正確に何を単一の明確な答えはありません。

私がビジネス・ロジックを置く場所が2つしかないことが判明しました。リデューサーまたはアクション作成者のいずれかです。今、私がしたいことは状態に影響を及ぼさないので、定義による減速器は状態に影響します、私はアクションクリエーターにこのロジックを置くことに傾いています。

アクションクリエイターに関するドキュメント:アクションクリエイターはアクションを作成する機能です。 「アクション」と「アクションクリエイター」の用語を簡単に組み合わせることができます。したがって、適切な用語を使用するために最善を尽くしてください。 [...] Reduxアクション作成者は単にアクションを返します

アクションに関するドキュメント:アクションは単純なJavaScriptオブジェクトです。

私のログイン例えば擬似コード:私はアクションの作成者の目的であるアクションを、返さないだから、明らかに

function login() { 
    // retrieving and serializing the state, then: 
    localStorage.set('my_app_id_state', my_serialized_state); 
    window.location = url_to_authorization_service; 
} 

このコードは、アクションの作成者で場所がありません。しかし、私はまだそれを完全に独立させることはできませんので、状態を取得する必要があります。

ここでも問題は、このコードをアプリケーション構造に配置することです。

コードは正常に動作していますので、これは学問的な疑問ですが、Reduxの本質的なルールを明確に破っていることはたくさんあります。多分それは単なる例外ですか?

答えて

0

Dan Abramov私は結論として、これはドキュメントに記載されているルールの例外であると結論づけます。

Dan Abramov's reply

0

これは良い質問であり、私が間違っていることを実感しました。だから、うまくいけば、この答えは、少なくとも両方に参考になります:)

Real World Redux exampleから適応この例を見てみましょう:

プライベート関数

function oauth(url) { 
return (dispatch) => { 
    dispatch({ 
    type: types.OAUTH_LOGIN, 
    url 
    }); 
}; 
} 

は、関数を返すアクションの作成者(によって呼び出されます)

export function loginToApi(redirectUrl) { 
    return (dispatch) => { 
    return dispatch(oauth(redirectUrl)) 
    } 
} 

順番にアクションがそのようにように、コンポーネントに呼び出される。

login() { 
return this.props.dispatch(loginToApi()); 
} 

質問に答える1つの方法は、ビジネスロジックをプライベートメソッドの中に置くことです。このメソッドは、アクションクリエータによって呼び出されます。

おそらくもっとエレガントな方法ですが、これは私が上記のドキュメントでどのように行われているかです。

ローカルストレージに状態を保存するためのログインロジックについて:これは必要ないと思います。 Reduxストアが状態を管理しています。

+0

こんにちは、答えるために時間を割いていただきありがとうございます。申し訳ありませんが、私の質問が混乱している場合、私はアプリケーションの状態に影響を与えない何かを行う必要がある例を挙げようとしています。 Reduxのdocsから: "アクションはアプリケーションからあなたの店にデータを送る情報のペイロードです。[...]アクションは単純なJavaScriptオブジェクトです。アクションはタイププロパティを持っていなければなりません..."あなたの例では、単純なオブジェクトであり、私はログイン機能でもそうしていません。したがって、私たちのどちらも、実際に何をすべきかについてのスペックに従っているわけではありません。 – Sebastian

+0

私は今質問を編集しました。 – Sebastian

+0

ハ、良い点!私の答えを編集させてください。それまでのところ、これは見たことがありますかhttps://github.com/reactjs/redux/blob/55f19b68e91d3c1a14ccd7d4e226e642e167bef8/examples/async/actions/index.js#L38あなたの解決策はそこにあると思います –

関連する問題