web-dev-qa-db-ja.com

React Reduxでアクションが完了するのを待っています

私はreactとreduxが初めてであり、angularとどのように異なるかを調査しています。

単純なログインページを作成しようとしていますが、目的を達成できません。ログインフォームからユーザー名とパスワードを取得したら、次のように送信します。

_  submitHandler(e){
    e.preventDefault();
    var user = {
      name : this.state.username,
      password: this.state.password
    }
    this.props.authenticateUser(user);
    browserHistory.Push('/home');
    this.setState({
      username:'',
      password:''
    })
  }
_

ここで、authenticateUserは、既存のユーザーのリストと、プロパティisAuthenticatedを持つ状態からチェックする、reducer内の関数です（以下を参照）。

_ case 'AUTHENTICATE_USER':
        var users = state.userslist;
        var payloadUser = action.payload;
        for (let i = 0; i < users.length; i++) {
            let user = users[i]
            if (user.name === payloadUser.name) {
                return {...state, isAuthenticated: true };
            }
        };
        return {...state, isAuthenticated: false };
_

今、Angularでは、この呼び出しが完了するのを待って、この値がtrueまたはfalseであるかどうかを確認し、_angular-router_を使用してホームページに移動します。

しかし、どのようにreactで同じことを達成できますか。サンプルアプリケーションで_react-router_を使用しています。

this.props.authenticateUser(user)を呼び出す場所のすぐ下のisAuthenticated関数でsubmitHandlerをチェックしようとしましたが、問題は、_this.props.isAuthenticateUser_が更新されず、false、これはレデューサーでinitialStateとして設定しました。

isAuthenticated関数が呼び出された後にauthenticateUserをチェックして、ホームページのルーティングを続行できるようにする方法を教えてください。 promiseを使用し、reduxによって状態が更新されるのを待ってから、もう一度確認する必要がありますか？ （reactは一方通行のパスであり、そのようには動作しないことを知っています。）

また、認証に失敗した場合、ログインフォームの下にエラーパネルを表示するにはどうすればよいですか。入力としてisAuthenticatedを受け取り、表示するためにfalseかどうかをチェックするエラーパネルのコンポーネントを使用すると思います（AngularのようなngShow。）しかし、私はそれが怖い私の状態がちょうど時間内に更新されないため、同様に動作しません。

状態が変化すると、render関数が呼び出されることを知っています。しかし、私はただReact。

Edit：簡潔にするために、上記のアクション作成者と完全なリデューサーは提供せず、ユーザー認証のケース切り替え操作のみを示しました。私のアプリは、アクション、レデューサー、コンテナー、コンポーネントなどを備えた元のreduxアーキテクチャーに従います。

EDIT：Githubリンク ここ

reactjsreduxreact-routerreact-redux
10
v1shnu

Reduxアプリケーションでのデータフローの仕組みを簡単に説明します。

  1. レデューサーは、コンポーネントから直接呼び出さないでください。ユーザー認証の呼び出しはアクション内にある必要があり、それはコンポーネントからディスパッチされるべきものです。

  2. アクションを定義するとき、アクションのタイプを定義するプロパティを与えることができます。たとえば、この場合、_type: AUTHENTICATE_USER_になります

  3. アクションの完了後、reduxストアは現在の状態とアクションとともにリデューサーを呼び出します。ここで、action.type_に基づいてredux状態を更新できます（上記の2番目のコードスニペット）

  4. これが最も重要な部分です：コンポーネントには、Redux状態から値をコンポーネントに渡すmapStateToPropsメソッドが必要です。そのため、状態が変化すると、小道具が更新され、コンポーネントが再レンダリングされます。 mapStateToPropsを使用するには、react-reduxライブラリからconnectを実装する必要があります。 （ https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options ）

あなたが望むものを達成するために、これは私が提案するものです：

  1. コンポーネントのcomponentWillReceivePropsメソッドで、_props.isAuthenticated_を確認し、context.router.Push()を使用して、ユーザーが認証された場合にナビゲートします。

  2. また、コンポーネントのrenderメソッドで_props.isAuthenticated_に基づいてチェックを行い、エラーメッセージを表示します。

役立つリンク：

http://redux.js.org/docs/basics/DataFlow.html

http://redux.js.org/docs/basics/UsageWithReact.html

15
Nupur