代码之家 › 专栏 › 技术社区 › itaied

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

redux reactjs javascript

itaied · 技术社区 · 6 年前

我在用 React Redux

中的登录页由多个组件组成,用于将道具传递给。

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

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

在 LoginPage 我绘制了州地图,并派了一些道具,
我在这里看到两种选择:

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))
})

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

我应该如何处理这个问题?

但我还不能决定现在和将来适合我的是什么。

最佳实践是什么?

3 回复 | 直到 6 年前

Daniel Dolinchuk 6 年前

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

您可能应该在提交时用Redux传递数据。以太将窗体的整个状态存储为对象,或者根本不存储,只是通过api调用来调度操作。

KevinMeister 5 年前

热释光;博士,这是一个更“通用”的编码实践。但是让我们把它放在一个react-redux的背景下。

假设你采用第一种方法,那么你可能会有5个ActionCreator:

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)) } }

Dennis Wanjiru 6 年前

处理此问题的最佳实践是在您的计算机上设置一个本地州 Form 组件并在本地管理它,因为我认为它不是一个共享状态。onSubmit您可以将您的操作传递给进行API调用或将其发布到服务器所需的操作。

Handling multiple form inputs in react