子コンポーネントからアクションを3レベル下にディスパッチする方法はありますか？

Question

私は現在、Reactアプリケーションを設計しているこの問題に直面しており、その答えを見つけることができないようです。だから私のアプリケーションは、コンポーネントの階層構造は次の通りです

がで反応ルータ

アプリケーション - > DynamicContainer - > - > LoginComponent今

、LoginComponentsユーザー名とパスワードを取るためにフォーム要素を持っています。

ログインが処理されるuserActionCreatorsを持っていますが、ログインが成功した場合はディスパッチしますが、LoginComponentをアクションのディスパッチまたはactionCreatorsの呼び出しに接続する正しい方法が見つかっていないようです。

どうすればよいですか？どんな提案もありがとうございます。

Answer 1

単一の目的のフォームをconnectでアクションにバインドすることもできます。

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自動的にアクションの作成者を結合し、別途propsにdispatchを提供するので、あなたがより明確になりたい場合は、上記の例：<LoginComponent />は通常、常に正確に同じことをやっているので、あなたはこのようにそれを使用することができます

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 }; 
    } 
} 

Answer 2

つのオプション：

1. がpropsオブジェクト経由（Reduxのに接続されていない）子コンポーネントにダウン（Reduxのに接続されている）あなたのコンテナからのバインドされたactionCreatorを渡します。

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

Answer 3

私があなたを正しく理解していれば、Example: Todo List | Reduxを読むと、あなたが探している例が見つかります。

のAppコンポーネントは、あります接続（）Reduxのにエド、その後、他のコンポーネントがあります：AddTodo、todolistの、藤堂とフッターを。ユーザーが何かをクリックすることができます藤堂を呼び出しtodolistのを呼び出し

アプリケーション。下記のとおり、このクリックは、藤堂へtodolistのからのAppに、コールバックの後にコールバックをバックサーフィンします：todolistの <TodoList todos={visibleTodos} onTodoClick={ index => dispatch(completeTodo(index)) } />

でtodolistのを呼び出し

1. のApp Todoと <Todo {...todo} key={index} onClick={() => this.props.onTodoClick(index) } />

2. 藤堂成分は<li>onClick={this.props.onClick}と性質を有しています。

   だから

、後方、場合誰かクリックこの、最後に次にtodolistの（オプションの追加パラメータインデックスに気づく）、からthis.props.onTodoClick(index)を呼び出すなるthis.props.onClickを呼び出す藤堂成分を返す、内部機能dispatch(completeTodo(index))をからに呼び出します。