14

私は現在、React アプリケーションの設計でこの問題に直面していますが、答えが見つからないようです。

したがって、私のアプリケーションには、React Router のコンポーネントの次の階層があります。

アプリ -> DynamicContainer -> -> LoginComponent

現在、LoginComponents には、ユーザー名とパスワードを取得するためのフォーム要素があります。

ログインが処理される userActionCreators があり、終了時にログインが正常にディスパッチされますが、LoginComponent を接続してアクションをディスパッチしたり、actionCreators を呼び出したりする正しい方法を見つけることができないようです。

どうすればいいのですか？任意の提案をいただければ幸いです。

4

3 に答える 3

16

1 つのオプションは、単一目的のフォームをアクションにバインドすることconnectです。は通常、常にまったく同じことを行うため<LoginComponent />、次のように使用できます。

import React from 'react';
import * as userActionCreators from '../actions/users';
import { connect } from 'react-redux';

export class LoginComponent extends React.Component {
   static propTypes = {
     login: React.PropTypes.func.isRequired
   }

   render() { 
     const { login } = this.props;
     const { username, password } = this.state;

     return (
       <form onSubmit={ () => login(username, password) }>
         ...
       </form>
     );
   }
}

export default connect(null, userActionCreators)(LoginComponent);

connectアクション作成者を自動的にバインドし、個別に に提供dispatchするpropsため、より明確にしたい場合は、上記の例は次のようになります

import React from 'react';
import { login } from '../actions/users';
import { connect } from 'react-redux';

export class LoginComponent extends React.Component {
   static propTypes = {
     dispatch: React.PropTypes.func.isRequired
   }

   render() { 
     const { login, dispatch } = this.props;
     const { username, password } = this.state;

     return (
       <form onSubmit={ () => dispatch(login(username, password)) }>
         ...
       </form>
     );
   }
}

export default connect()(LoginComponent);

参考までにuserActionCreators、

const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
const LOGIN_FAILED = 'LOGIN_FAILED';

export function login(username, password) {
  if (username === 'realUser' && password === 'secretPassword') {
    return { type: LOGIN_SUCCESS, payload: { name: 'Joe', username: 'realUser' } };
  } else {
    return { type: LOGIN_FAILED, error: 'Invalid username or password };
  }
}
于 2015-10-21T16:58:34.437 に答える
1

2 つのオプション:

  1. オブジェクトを介して、バインドされた actionCreator をコンテナー (Redux に接続されている) から子コンポーネント (Redux に接続されていない) に渡しpropsます。

  2. プロジェクトにReact Component Contextを採用することを検討してください。

于 2015-10-20T18:49:11.180 に答える