在React-Redux中验证“容器组件”中的触发事件

Question

I am trying to adopt the philosophy of performing all operations in 'Container Component' (aka smart component) & then just passing data on to the 'Presentation Components'.

I am stuck at this point, where I need to validate the user action (event fired) before I dispatch the action to the Reducer . The way I want to do this is by validating the event in the function inside 'mapDispatchToProps'.

The code looks like this:

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

My question is, is it possible? Or must I perform the validation downstream in the presentation component and then call the 'dispatchOneAction' function?

Answer 1

The connect allows a 3rd argument called mergeProps :

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

mergeProps is a function that will receive the result from your mapStateToProps , mapDispatchToProps and the props provided to your component. It allows you to use them all in order to manipulate and return the final props that should be applied to your component. This could be an opportunity to decorate your action creators with additional validation logic based on your state. You can do whatever you like, returning a completely new set of props to be applied to your component.

For example, using your described case:

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

Refer to the official react-redux docs for more info.

---

An alternative approach is to use redux-thunk based actions. This allows you to encapsulate logic within your action creators with access to the state. You can additionally fire off further actions from within your thunk action.

For example:

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

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

    dispatch(failedAction());
};

Answer 2

One of the main benefits of separating "Containers" and "Presentational Components" is to handle all logic for a specific component inside it. That said, you might define an action that changes your state and only fire it when valid.

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

And:

Class ContainerComponent extends React.Component {
  ...
  render() {
    <PresentationalComponent changeState={actions.changeState} />
  }
}