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：组件或容器中的表单？

回答

相关问题