如何從子組件向下三級調度動作？

我目前正在面對這個問題設計一個React應用程序，我似乎無法找到答案。如何從子組件向下三級調度動作？

所以我的應用程序有以下組件的層次結構中的陣營路由器

應用 - > DynamicContainer - > - > LoginComponent

現在，LoginComponents具有表單元素採取用戶名和密碼。

我有userActionCreators登錄處理，它完成後調度登錄成功，但我似乎無法找到正確的方式來連接我的LoginComponent調度操作或調用actionCreators。

我該怎麼做？任何建議，將不勝感激。

來源

2015-10-20 Nitesh

一種選擇是將您的單用表格與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-21 16:58:34

謝謝！你可以添加回答'userActionCreators'應該是什麼樣子？ – vitalets

我添加了'userActionsCreators'示例並在'connect'擴展了 –

感謝您的幫助，在中間代碼塊中，您忘記了從'this.props'中提取'dispatch'。 –

兩個選項：

傳遞從集裝箱綁定actionCreator（連接到終極版）下降到子組件（未連接到終極版）通過props對象。
考慮在您的項目中採用React Component Context。

來源

2015-10-20 18:49:11 JonnyReeves

當通過react-router定義heirarchy時，如何通過boundActionCreator將不同的子組件附加到充當佔位符的DynamicContainer組件上。我只是在DynamicContainer組件內有{this.props.children}。 – Nitesh

所以你試圖通過反應路由器將應用程序根目錄中的動作創建者傳遞給某種類型的登錄表單組件？ – ctrlplusb

如果我的理解正確，如果您閱讀Example: Todo List | Redux，您會發現您可能正在尋找的示例。

還有的應用組件，連接（）的到終極版，再有就是其他組件：AddTodo，TodoList的，藤和頁腳。

應用調用TodoList的調用藤在那裏用戶可以點擊的東西。回調後，該點擊將衝浪回來的回調，從的Todo到TodoList的到應用詳述如下：

應用調用TodoList的與 <TodoList todos={visibleTodos} onTodoClick={ index => dispatch(completeTodo(index)) } />
TodoList的致電待辦事項與 <Todo {...todo} key={index} onClick={() => this.props.onTodoClick(index) } />
待辦事項組分具有<li>與onClick={this.props.onClick}屬性。

所以，向後，當藤成分，它裏面某人的點擊，將調用this.props.onClick它將調用this.props.onTodoClick(index)從TodoList的（注意可選的附加參數指數），然後在最後，這將從App調用功能dispatch(completeTodo(index))。

來源

2015-12-16 22:17:21

如何從子組件向下三級調度動作？

回答

相關問題