Question

我在网络应用中使用11: error: [Dagger/MissingBinding] [dagger.android.AndroidInjector.inject(T)] @cz.ejstn.learnlanguageapp.core.dagger.module.vocabulary.VocabularyProviders java.util.List<? extends cz.ejstn.learnlanguageapp.vocabulary.model.factory.VocabularyProvider> cannot be provided without an @Provides-annotated method.和React。
在登录页面中，我有多个字段（输入）。
由多个组件组成的登录页面，将道具传递给该页面。

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

Redux

在LoginPage (container) -> AuthenticationForm (Component) -> SignupForm (Component)中，我将状态映射并分配给道具，
我在这里看到2个选项：

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

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

我应该如何解决这个问题？
这似乎是一个基本问题，因为必须处理许多表格，
但是我还无法决定现在和将来长什么样的人。

最佳做法是什么？

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; dr。这是一种更“通用”的编码实践。但是，让我们将其放在react-redux上下文中。

说，如果您使用方法1，那么您可能会有5个actionCreator作为

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

如果您有actionType，那么

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只是为您提供实用程序，并提出了一些限制以启用“时间旅行”（状态转换在突变处理程序（基于单独的操作）。

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

3 个答案: