Передача нескольких действий в mapDispatchToProps в Redux

Question

У меня есть 3 действия, которые я пытаюсь использовать в этом компоненте.Один выводит меня из Firebase Google Auth (работает корректно), а два других просто меняют часть состояния на определенную строку, которую я собираюсь использовать позже, чтобы определить, какой компонент визуализировать.

Комментарийout mapDispatchToProps работает нормально, и я привык к его написанию, тот, который использует метод выхода из системы, - это синтаксис, который я не могу понять.Как мне выполнить рефакторинг ниже, чтобы setRoutines и setExercises работали?

Компонент:

import React from 'react';

import { connect } from "react-redux";
import { firebaseLogout } from '../Auth/Auth.actions';
import { setRoutines, setExercises } from './Profile.actions';

const Profile = ({logout, setRoutines, setExercises}) => (
    <React.Fragment>
        <button onClick={setRoutines}>My Routines</button>
        <button onClick={setExercises}>My Exercises</button>
        <button onClick={logout}>Logout</button>
    </React.Fragment>
);

const mapDispatchToProps = (dispatch) => ({
    logout: () => dispatch(firebaseLogout()),
    setRoutines,
    setExercises,
});

// const mapDispatchToProps = {
//     setRoutines,
//     setExercises
// };

export default connect(
  undefined,
  mapDispatchToProps
)(Profile);

Файл моих действий:

export const setRoutines = () => ({
    type: "SET_ROUTINES",
    payload: "routines"
});
export const setExercises = () => ({
    type: "SET_EXERCISES",
    payload: "exercises"
});

export const logout = () => ({
    type: 'LOGOUT'
});

export const firebaseLogout = () => {
    return () => {
        return firebase.auth().signOut();
    }
};

Файл моего редуктора:

export default (state = {view:'routines'}, action) => {
    switch (action.type) {
        case 'SET_ROUTINES':
            return {
                ...state,
                view: action.payload
            };

        case 'SET_EXERCISES':
            return {
                ...state,
                view: action.payload
            };

        case 'LOGOUT':
            return {};

        default:
            return state;
    }
};

Answer 1

Изменение mapDispatchToProps в указанном ниже формате должно помочь в создании создателя связанных действий, который автоматически отправляет.

const mapDispatchToProps = (dispatch) => ({
    logout: () => dispatch(firebaseLogout()),
    boundRoutines: () => dispatch(setRoutines()), 
    boundExercises: () => dispatch(setExercises()),
});

После создания создателя связанных действий мы можем вызвать создателя следующим образом.

const Profile = ({logout, boundRoutines, boundExercises}) => (
    <React.Fragment>
        <button onClick={boundRoutines}>My Routines</button>
        <button onClick={boundExercises}>My Exercises</button>
        <button onClick={logout}>Logout</button>
    </React.Fragment>
);