javascript - 验证 React-Redux 中 'Container Component' 中触发的事件

Question

我试图采用在“容器组件”(又名智能组件)中执行所有操作的理念，然后将数据传递到“演示组件”。

我陷入了这一点，我需要在将操作分派(dispatch)到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”函数？

Answer 1

connect 允许使用名为 mergeProps 的第三个参数:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

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

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

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

请参阅official react-redux docs了解更多信息。

<小时/>

另一种方法是使用 redux-thunk为基础的行动。这允许您将逻辑封装在可以访问状态的操作创建者中。您还可以在 thunk 操作中触发进一步的操作。

例如:

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

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

    dispatch(failedAction());
};