Как правильно реализовать mapDispatchToProps на редуксе?

Question

Я видел два способа реализации mapDispatchToProps

Первый способ:

function mapDispatchToProps(dispatch) {
  return { actionMapped: bindActionCreators(courseActions, dispatch) };
}

Второй способ:

function mapDispatchToProps(dispatch) {
  return { actionMapped: () => dispatch( courseActions() )};
}

Какой из них более эффективен?Есть ли сценарий, который я должен использовать конкретный?Один из них "рекомендуемый"?

Answer 1

Если courseActions является объектом действий, проще просто передать объект действий в метод connect в качестве параметра mapDispatchToProps:

Если объект передается, каждая функция внутри него считается Redux Action Creator. Объект с теми же именами функций, но с каждый создатель действия заключен в диспетчерский вызов, чтобы они могли быть вызывается напрямую, будет добавлен в реквизиты компонента.

Пример:

connect(mapStateToProps, courseActions)

bindActionCreators делает то же самое, но вам нужно явно передать dipsatch:

const mapDispatchToProps =(dispatch) => 
    bindActionCreators(courseActions, dispatch)

Answer 2

Существует несколько допустимых способов «привязать» создателей ваших действий при подключении компонента Redux. Вот несколько примеров:

    import {action1, action2} from "myActions";
    import {bindActionCreators} from "redux";

    const mapDispatchToProps(dispatch) => {
        return {
            manuallyBoundAction : (...args) => dispatch(action1(...args)),
            autoBoundAction : bindActionCreators(action2, dispatch),
            multipleActionsTogether : bindActionCreators({action1, action2}, dispatch)
        }
    };

    const MyComponent = (props) => {
        return (
            <div>
                <button onClick={props.manuallyBoundAction}>Run First Action</button>
                <button onClick={props.autoBoundAction}>Run Second Action</button>
                <button onClick={props.multipleActionsTogether.action1}>Run Third Action</button>
                <button onClick={props.multipleActionsTogether.action2}>Run Fourth Action</button>
            </div>
        )
    }

    export default connect(null, mapDispatchToProps)(MyComponent);

    // or, you can use the "object shorthand" for mapDispatch:
    export default connect(null, {action1, action2})(SomeOtherComponent)

Все это в конечном итоге приводит к функциям, которые обертывают вашего создателя действия и автоматически передают его возвращаемое значение в dispatch() при вызове.

Я лично рекомендую подход "сокращение от объекта". Мне никогда не было веской причины написать действительную mapDispatch функцию вручную.