Question

我很难理解何时使用组件以及何时使用容器。我知道只有容器应该连接到商店，所有（表示性）组件都应该获得所有必要的输入作为道具。

如果我想写一个登录页面，我会创建一个LoginPage.js来呈现UserForm.js。现在我不太明白如何从这里开始。我应该将UserForm连接到商店还是LoginPage，还是更好地编写呈现LoginContainer.js并连接到商店的LoginPage.js？

在最后一种情况下，如何在提交UserForm时调度（async，使用redux-thunk）操作。这个必须从LoginPage完成，但是LoginPage不知道任何提交，是吗？

我希望这个问题不是太模糊或不清楚。任何帮助将不胜感激！

干杯

Answer 1

将您的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)
  );
}

我希望这会以某种方式帮助你。如果你在这里有任何查询...

React-Redux：组件或容器中的表单？

1 个答案: