CODEWITHSUNDEEP
reactjs
Nika Roffy
Nika Roffy

Reputation: 941

React is not importing redux action even tho it is exported

I have this action:

export const setActive = (index,payload) => ({
  type:actionTypes.SET_ACTIVE,
  payload,
  id
})

This is reducer:

case actionTypes.SET_ACTIVE:
          return {
            ...state,
            accounts:[...state.accounts,{active:action.payload,id:action.id}]
          }

this is how I import it in my component:

import { connect } from "react-redux";
import { bindActionCreators } from 'redux';
import { setActive } from '../../redux/user/actions'


const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    {
      setActive
    },
    dispatch,
  ),
});


const mapStateToProps = createStructuredSelector({
  GetAccounts: getAccounts,
});

export default connect(mapStateToProps, null)(UserMenuAccounts);

This is how I use it in the function:

setActiveFunc = (item) => {
    const {actions} = this.props
    console.log("Info",item.active,item.id)
    actions.setActive(!item.active,item.id)
  };

But when this function is executed,I get this error TypeError: undefined is not an object (evaluating 'actions.setActive')

Any suggestions on why this is happening and how can I fix it?

Upvotes: 1

Views: 34

Answers (1)

Drew Reese
Drew Reese

Reputation: 202618

You don't actually pass your mapDispatchToProps to the connect HOC.

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    {
      setActive
    },
    dispatch,
  ),
});


const mapStateToProps = createStructuredSelector({
  GetAccounts: getAccounts,
});

export default connect(mapStateToProps, null)(UserMenuAccounts); // passed null!!

Solution

Pass mapDispatchToProps to connect HOC.

export default connect(mapStateToProps, mapDispatchToProps)(UserMenuAccounts);

Upvotes: 1

Related Questions