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

Question

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

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

在最后一种情况下，我如何在提交 UserForm 时分派（异步，使用 redux-thunk，）操作。这必须从 LoginPage 以某种方式完成，但 LoginPage 不知道任何提交，是吗？

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

干杯

Answer 1

将您的 LoginPage.js 连接到 redux 存储并在其中呈现 LoginForm.js。将所有必要的数据作为 props 传递（也可以传递函数）

对于前- 你的 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)
  );
}

我希望这能以某种方式帮助你。如果您有任何疑问 post 这里...

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

React-Redux: Forms in component or container?

reactjs

redux

redux-thunk