How can I add redux form into my dispatch function?

Question

Currently I am trying to dispatch some actions in react/redux and I am also using redux form. How do I go about implementing redux form within the react-redux connect function?

Dispatch Function:

const mapDispatchToProps = (dispatch) => {
  return{
    authUser: () => {
      dispatch(authUser());
    },
    signIn: () => {
      dispatch(authUser());
    }
  }
}

Then using the react-redux connect function:

export default reduxForm({
  validate, form: 'signInForm'})
(connect(mapStateToProps, mapDispatchToProps) (SignIn))

When passing in the signIn function to the mapDispatchToProps, the form then stops submitting?

mapStateToProps function:

function mapStateToProps(state){
  return {
    SignInDetails: state.SignInDetails,
    isAuthenticated: state.isAuthenticated
  }
}

signIn Reducer:

import _ from 'lodash';
const SIGN_IN_FULFILLED = 'SIGN_IN_FULFILLED';

export default function(state, action){
  //eslint-disable-next-line
  switch (action.type) {
    case SIGN_IN_FULFILLED:
      return _.mapKeys(action.payload.data, 'id');
    default:
      return {};
  }
}

whats the components name you are binding connect with ? And can i see actions — Aaqib

Shivani Shivani · Accepted Answer · 2017-11-23T12:47:02

You can try this :

import { connect } from 'react-redux' ;
import { reduxForm } from 'redux-form';

...




export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
      form: 'signInForm',
      validate
})(SignIn));

How can I add redux form into my dispatch function?

1 Answers