Passing second argument (ownProps) to mapDispatchToProps - is a bad pactice?

Question

I'm new in developing React app. So, i have some questions. What's the best practice to access state properties inside mapDispatchToProps? Is it a bad practice to use ownProps.store.getState() in mDTP function? What's the reason to use second argument in mDTP (except to passing additional properties in container components)?

Please advise what to read on this theme. Thank you very much! Sorry, for my language.

score 0 · Answer 1 · answered Nov 23 '18 at 10:17

This answer might help you:

What is mapDispatchToProps?

mapDispatchToProps exists to make the reducers accessible through the component, when following a Container > Component pattern.

For example, i have these reducers:

const updateToPreviousMonth = (state) => {
    let newState = state,
        currentMonth = newState.get('currentMonth');
    let previousMonth = sanitizedDate(moment(currentMonth).subtract(1, 'month'));

    return newState.set('currentMonth', previousMonth);
};

const updateSelectedDate = (state, action) => {
    return state.set('selectedDate', action.selectedDate);
};

export default (state = initialState, action = {}) => {
    switch (action.type) {
        case constants.SET_TO_PREVIOUS_MONTH:
            return updateToPreviousMonth(state);
        case constants.UPDATE_SELECTED_DATE:
            return updateSelectedDate(state, action);
        default:
            return state;
    }
};

The constants are the Actions, and the functions (reducers) which return the changed state.

const mapDispatchToProps = {
    setToPreviousMonth: CalendarViewRedux.actions.setToPreviousMonth,
    updateSelectedDate: CalendarViewRedux.actions.updateSelectedDate
};

export class CalendarView extends PureComponent {
    componentDidMount() {
        this.props.loadSchedules();
    }

    render() {
        return (<CalendarViewRender
            {...this.props} />);
    }
}

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

On this example, i am passing the actions in mapDispatchToProps, and when called, they will activate the reducers from before, since i used mapDispatchToProps, they are now available in the CalendarView component.

Hope this helps, please mark as solved if this was helpful.

kivul · Answer 2 · 2018-11-23T12:06:28.783

I have 'ownProps' on my mapDispatchToProps to navigate to HomeScreen if I need a reset state (in my case I need to show different screens if user is logged on or off). Here's the example:

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onChangeText: (key, value) => {
      dispatch(onChangeField(key, value))
    },

    goToHomeScreen: () => {
      ownProps.navigation.dispatch(StackActions.reset({index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'LoggedDrawer'})]}))
    },
  }
}

And for calling i simply do this:

this.props.goToHomeScreen();

Also, I believe this could help: What is the use of the ownProps arg in mapStateToProps and mapDispatchToProps?

Passing second argument (ownProps) to mapDispatchToProps - is a bad pactice?

2 Answers2