在 Redux 中将多个操作传递给 mapDispatchToProps

Question

我尝试在此组件中使用 3 个操作。一个让我退出 Firebase Google Auth（正常工作），另外两个只是将一个状态更改为某个字符串，稍后我将使用该字符串来确定要渲染的组件。

注释掉的 mapDispatchToProps 工作正常，这是我习惯的写法，使用 logout 方法的语法是我想不通的语法。如何重构以下内容以便 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>
);