在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 docs https://reactjs.org/docs/forms.html中有很好的解释

您可能应该在提交时传递Redux中的数据。以表格形式存储整个状态作为对象，或者根本不存储，只是通过api调用调度动作。

Answer 2

处理此问题的最佳做法是在Form组件上使用本地状态并在本地管理它，因为我认为它不是共享状态。 onSubmit你可以将你的动作从状态传递给进行API调用或将其发布到服务器所需的动作。

如果您尝试在用户键入时继续更新商店，它将继续调度可能在将来导致问题的操作。你在这里阅读更多Handling multiple form inputs in react

Answer 3

TD;博士。这是一种更“通用”的编码实践。但是，让我们把它放在react-redux环境下。

假如你去了接近1，那么你可能会有5个actionCreators

function updateInput1({value}) {  return {type: 'UPDATE_INPUT1', payload: {value}} }
...
function updateInput5({value}) {  return {type: 'UPDATE_INPUT5', payload: {value}} }

如果你有actionTypes，那么

const UPDATE_INPUT1 = 'UPDATE_INPUT1'
...
const UPDATE_INPUT5 = 'UPDATE_INPUT5'

减速器可能看起来像

function handleInputUpdate(state = {}, {type, payload: {value}}) {
  switch (type) {
    case UPDATE_INPUT1: return {..., input1: value}
    ...
    case UPDATE_INPUT5: return {..., input5: value}
    default: return state
  }
}

问题是什么，事实上，我不认为你在mapStateToProps / mapDispatchToProps，Don't repeat yourself散布太多道具！

所以很自然地，你想要更通用的功能来避免这种情况，

const UPDATE_INPUT = 'UPDATE_INPUT'

function updateInput({name, value}) { return {type: UPDATE_INPUT, payload: {name, value}} }

function handleInputUpdate(state = {inputs: null}, {type, payload: {name, value}}) {
  switch (type) {
    case UPDATE_INPUT: return {inputs: {...state.inputs, [name]: value}}
    default: return state
  }
}

最后，“选择器”部分，基于状态的设计，从中获取组件的道具将是相当微不足道的

function mapStateToProps(state) { return {inputs: state.inputs} }
function mapDispatchToProps(dispatch) { return {update(name, value) { dispatch(updateInput(name, value)) } }

总而言之，它不一定是redux / react问题，更多的是你为ui设计应用程序状态，redux只为你提供实用程序并提出一些限制来启用“时间旅行”（状态转换在基于变异处理程序的情况下显式化）在一个单独的行动）。