在 react/redux 中传递多个道具和动作

Question

我正在使用React和Redux在我的网络应用程序中。
在登录页面中，我有多个字段（输入）。
登录页面由多个组件组成，用于传递道具。

我想知道我应该如何传递道具和更新动作。
例如，假设我的登录页面中有 5 个输入。

LoginPage (container) -> AuthenticationForm (Component) -> SignupForm (Component)

在LoginPage我将状态和调度映射到道具中，
我在这里看到 2 个选项：

mapStateToProps = (state) => ({
  input1: state.input1,
  ...
  input5: state.input5
})

mapDispatchToProps = (dispatch) => ({
  changeInput1: (ev) => dispatch(updateInput1(ev.target.value))
  ...
  changeInput5: (ev) => dispatch(updateInput5(ev.target.value))
})

在这个解决方案中，我需要沿着路径传递很多道具（调度动作和状态数据）。

另一种方法是这样的：

mapStateToProps = (state) => ({
  values: {input1: state.input1, ..., input5: state.input5}
})

mapDispatchToProps = (dispatch) => ({
  update: (name) => (ev) => dispatch(update(name, ev.target.value))
})

在这个解决方案中，我必须跟踪并发送我想要更新的输入名称。

我应该如何解决这个问题？
这似乎是一个基本问题，因为很多表格都必须处理它，
但我还不能决定现在和长期适合我的东西。

最佳做法是什么？

Answer 1

我认为最佳实践是在 React 组件本身中处理所有这些逻辑。您可以使用组件的状态来存储输入的数据并使用类方法来处理它。React 文档中有很好的解释https://reactjs.org/docs/forms.html

您可能应该在提交时在 Redux 中传递数据。Ether 将表单的整个状态存储为一个对象，或者根本不存储而只是通过 api 调用分派动作。