ReduxとReactRouterを使用したログインアプリ

Question

Reduxアーキテクチャを理解する上で正しい方向に向けることができれば感謝します。

私は自分の行動を処理する "減量"機能を実装する必要があります。 リデューサー機能を組み合わせて店舗を作成する必要があります。

私はLoginForm（React）コンポーネントを持っていて、バックエンドAPIへのXHR要求を行い、応答してJWTトークンを受け取るとします。

私がように私がアクションを派遣すべきAPIからの応答を取得：これは私のアプリケーションの状態を更新

store.dispatch({type: "USER_LOGGED_IN", 
       payload: {username: "john", JWT: "..."}); 

。

次は何ですか？

どのように次のページにルーティングしますか？ログインしたユーザー名でNavbarなどのコンポーネントを再レンダリングするにはどうすればよいですか？

リスナーを使用していますか？

Answer 1

のは、ユーザーを認証する方法をしたとしましょう：あなたは、次のを持っていると仮定すると

import { browserHistory } from 'react-router'; 

// ... 

function promisedApiCall(inputData) { 
    // ... 
    // api request to backend with input data 
    // return a promise 
} 

/* 
* on form submit we call this with input data 
*/ 
function authorizeUser(inputData) { 
    return promisedApiCall(inputData) 
     .then((response) => store.dispatch({ 
      type: "USER_LOGGED_IN", 
      payload: { 
       username: response.userName, 
       JWT: response.JWT 
      } 
     })) 
     .then(() => browserHistory.push('/success/path/url')) 
     .catch(() => browserHistory.push('/failure/path/url')); 
} 

はを前提条件：Reduxのストアとstoreオブジェクトを作成した

• はauthorizeUser()範囲で利用可能です実行される。
• メソッドpromisedApiCallは、LoginFormの入力データでバックエンドに要求する機能です。
• promisedApiCallは、promiseを返す必要があります。これが完了すると[これは本当に重要である]
• react-router with redux

を設定して、アプリケーションの状態は、ユーザ情報で更新されており、また、ユーザーが新しいページにリダイレクトされます。このpostは、react-routerを使用してプログラムでリダイレクトする方法の詳細を説明しています。

あなたのコンポーネントのアプリ状態にRedux connectを使ってアクセスしてください。

これで、コンポーネント内のユーザー情報が小道具となりました。

Answer 2

react-routerは

browserHistory.push(<route_where_you want_to_go>);

これは、ルートを変更できます、コンポーネント。あなたはこのようなことをインポートすることができますbrowserHistory、

import {browserHistory} from 'react-router';

そして、あなたのルートを変更することがあります。