Javascript 在'中验证激发的事件；容器组件'；在反应中重复

我试图采用在“容器组件”（也称为智能组件）中执行所有操作的理念&然后将数据传递给“表示组件”

我在这一点上陷入了困境，在将操作分派到

Reducer

之前，我需要验证用户操作（触发的事件）。我希望这样做的方式是通过验证“mapDispatchToProps”内函数中的事件

代码如下所示：

const mapStateToProps = ({ oneState, twoState }) => {
    return({
        oneState : oneState,
        twoState : twoState
    });
};

 const mapDispatchToProps = ( dispatch ) => {
    return({
        dispatchOneAction : () => {
    // do the validation here. The validation requires access to 
    // the 'oneState' obj above in the 'mapStateToProps'
        }
    });
 };

const C_Element = connect( mapStateToProps, mapDispatchToProps )( Ele );

---

我的问题是，这可能吗？或者我必须在

表示组件中执行下游验证，然后调用“dispatchOneAction”函数吗？
分离“容器”和“表示组件”的主要好处之一是处理其中特定组件的所有逻辑。也就是说，您可以定义一个更改您的状态的操作，并且只有在有效时才触发它

Class PresentationalComponent extends React.Component {
  ...
  onEventHandler() {
    if ( eventIsValid ) this.props.changeState();
  }
  ...
}

以及：

Class ContainerComponent扩展了React.Component{
...
render（）{
}
}
分离“容器”和“表示组件”的主要好处之一是处理其中特定组件的所有逻辑。也就是说，您可以定义一个更改您的状态的操作，并且只有在有效时才触发它

Class PresentationalComponent extends React.Component {
  ...
  onEventHandler() {
    if ( eventIsValid ) this.props.changeState();
  }
  ...
}

以及：

Class ContainerComponent扩展了React.Component{
...
render（）{
}
}
连接
允许第三个参数，称为
mergeProps
：

连接（[MapStateTrops]、[mapDispatchToProps]、[mergeProps]，
[选项]）

mergeProps
是一个函数，它将从您的
MapStateTrops
、
mapDispatchToProps
以及提供给组件的props接收结果。它允许您使用它们来操纵和返回应用于组件的最终道具。这可能是一个根据您的状态使用附加验证逻辑装饰动作创建者的机会。您可以做任何您喜欢的事情，返回一组全新的道具应用于组件

例如，使用您描述的案例：

const mapStateToProps = ({ oneState, twoState }) => {
  return({
    oneState : oneState,
    twoState : twoState
  });
};

const mapDispatchToProps = ( dispatch ) => {
  return bindActionCreators({
    successAction: MyActions.successAction,
    failAction: MyActions.failAction
  }, dispatch);
};

const mergeProps = (stateProps, dispatchProps, ownProps) => {
  const { oneState, twoState } = stateProps;
  const { successAction, failAction } = dispatchProps;
  const validatorAction = () => {
     if (oneState && twoState) {
       successAction();
     } else {
       failAction();
     }
  } 

  return Object.assign(
    {},
    stateProps,
    // We are providing new actions props
    { validatorAction },
    ownProps        
  );
}

const C_Element = connect( mapStateToProps, mapDispatchToProps, mergeProps)( Ele);

有关更多信息，请参阅


另一种方法是使用基于对象的操作。这允许您将逻辑封装在具有状态访问权限的动作创建者中。您还可以从
thunk
操作中启动进一步的操作

例如：

function validatingAction() {
  return (dispatch, getState) => {
    const { stateOne, stateTwo } = getState();

    if (stateOne && stateTwo) {
      dispatch(successAction());
    }

    dispatch(failedAction());
};

connect
允许第三个参数
mergeProps
：

连接（[MapStateTrops]、[mapDispatchToProps]、[mergeProps]，
[选项]）

mergeProps
是一个函数，它将从您的
MapStateTrops
、
mapDispatchToProps
以及提供给组件的props接收结果。它允许您使用它们来操纵和返回应用于组件的最终道具。这可能是一个根据您的状态使用附加验证逻辑装饰动作创建者的机会。您可以做任何您喜欢的事情，返回一组全新的道具应用于组件

例如，使用您描述的案例：

const mapStateToProps = ({ oneState, twoState }) => {
  return({
    oneState : oneState,
    twoState : twoState
  });
};

const mapDispatchToProps = ( dispatch ) => {
  return bindActionCreators({
    successAction: MyActions.successAction,
    failAction: MyActions.failAction
  }, dispatch);
};

const mergeProps = (stateProps, dispatchProps, ownProps) => {
  const { oneState, twoState } = stateProps;
  const { successAction, failAction } = dispatchProps;
  const validatorAction = () => {
     if (oneState && twoState) {
       successAction();
     } else {
       failAction();
     }
  } 

  return Object.assign(
    {},
    stateProps,
    // We are providing new actions props
    { validatorAction },
    ownProps        
  );
}

const C_Element = connect( mapStateToProps, mapDispatchToProps, mergeProps)( Ele);

有关更多信息，请参阅


另一种方法是使用基于对象的操作。这允许您将逻辑封装在具有状态访问权限的动作创建者中。您还可以从
thunk
操作中启动进一步的操作

例如：

function validatingAction() {
  return (dispatch, getState) => {
    const { stateOne, stateTwo } = getState();

    if (stateOne && stateTwo) {
      dispatch(successAction());
    }

    dispatch(failedAction());
};

为什么不在容器组件中定义一个函数来验证并将其作为道具传递给演示组件？谢谢@kinakuta这是一个非常好的建议为什么不在容器组件中定义一个函数来验证并将其作为道具传递给演示组件？谢谢@kinakuta这是一个非常好的建议问题使用
mergeProps
的方法是在容器的
render
方法中调用它，这意味着您不应该在那里真正触发更改状态/props的操作。您将收到以下警告：
警告：设置状态（…）：无法在现有状态转换期间更新[…]
。我真的很喜欢在
mergeProps
中这样做？你有没有遇到过这个问题，并找到了一个很好的解决方法？忘记我之前的评论吧。我刚刚看到，您实际上定义了一个函数来触发操作。我假设您在您的组件中使用了它，这样就可以工作了。你应该仔细阅读。谢谢您的回答（顺便说一句）：）使用
mergeProps
方法的一个问题是，它在容器的
render
方法中被调用，这意味着您不应该在那里真正触发更改状态/道具的操作。您将收到以下警告：
警告：设置状态（…）：无法在现有状态转换期间更新[…]
。我真的很喜欢在
mergeProps
中这样做？你有没有遇到过这个问题，并找到了一个很好的解决方法？忘记我之前的评论吧。我刚刚看到，您实际上定义了一个函数来触发操作。我假设您在您的组件中使用了它，这样就可以工作了。你应该仔细阅读。谢谢你的回答（顺便说一句：）