React-Redux：組件或容器中的表單？

我在理解何時使用組件以及何時使用用戶容器時遇到一些困難。我知道只有容器應該連接到商店，並且所有（演示）組件都應該獲得所有必要的輸入作爲道具。React-Redux：組件或容器中的表單？

如果我想寫一個登錄頁面，我會創建一個LoginPage.js，它會呈現一個UserForm.js。現在我不太明白如何從這裏開始。我應該將用戶窗體連接到商店還是登錄頁面，還是寫一個LoginContainer.js來渲染LoginPage.js並連接到商店會更好？

在最後一種情況下，如何在用戶窗體提交時調度（async，使用redux-thunk）操作。這不知何故必須從LoginPage完成，但LoginPage不知道任何提交，是嗎？

我希望這個問題不太模糊或不清楚。任何幫助將不勝感激！

乾杯

來源

2017-06-09 FloodLuszt

連接您的LoginPage.js到Redux的存儲和渲染LoginForm.js裏面。通過所有必要的數據作爲道具爲前您LoginPage.js（可以通過功能以及）

會是這樣的（我不寫在這裏完整的代碼）

onLogin(loginData) { 
    // do what you wanna do on login and call routeActions to move another 
    page after successfull login 
} 
render() { 
return(
    <LoginForm login={this.props.login} onLogin={this.onLogin} /> 
); 
} 
const mapStateToProps = (state) => ({ 
    login: state.login, // put your redux state here 
}); 
export default connect(mapStateToProps)(LoginPage);

不要忘記聲明道具......

和你LoginForm.js應該是這樣的

render() { 
    return (
    //some html stuff here(login form) 
    // on submit call that method from props 
    // this.props.onLogin(pass login data here) 
); 
}

我希望這會幫助你SOM ehow。如果你有任何查詢帖子在這裏...

來源

2017-06-09 12:00:32

因此，我將不得不派遣一些LOGIN_REQUEST在onLogin（）然後？ – FloodLuszt

是正好發送登錄請求與登錄表單數據.. –

謝謝！你能簡單地評論一下爲什麼這會是推薦的方式嗎？爲什麼直接連接LoginForm或爲LoginPage創建額外的容器不是一個好主意？ – FloodLuszt

React-Redux：組件或容器中的表單？

回答

相關問題