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

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

注释掉的mapDispatchToProps工作得很好，这就是我习惯于编写它的方式，使用注销方法的是我无法理解的语法。我如何重构下面的设置例程和设置练习

组成部分：

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 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;
    }
};

---

通过将

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>
);

const Profile=（{logout，boundRoutines，boundExercises}）=>(
我的惯例
我的练习
注销
);

通过将

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>
);

const Profile=（{logout，boundRoutines，boundExercises}）=>(
我的惯例
我的练习
注销
);

Bummer您不能将所有映射的分派道具放在名称空间对象“actions”下Bummer您不能将所有映射的分派道具放在名称空间对象“actions”下