javascript - Passing multiple actions to mapDispatchToProps in Redux - Stack Overflow

admin2025-04-19 0

I have 3 actions I am trying to use in this ponent. One logs me out of Firebase Google Auth (working correctly), and the other two are simply changing a piece of state to a certain string which I am going to use later to determine what ponent to render.

The mented out mapDispatchToProps works fine and it's how I'm used to writing it, the one using the logout method is the syntax I can't figure out. How can I refactor the below so that setRoutines and setExercises work?

The ponent:

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

My actions file:

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

My reducer file:

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

The ponent:

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

My actions file:

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

My reducer file:

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

Share Improve this question asked Dec 29, 2018 at 18:52 evsc 972 silver badges8 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

By modifying the mapDispatchToProps to the below mention format should help in creating a bound action creator that automatically dispatches.

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

After creating a bound action creator we can call the creator as follows.

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

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745067223a283058.html

javascriptPassing multiple actions to mapDispatchToProps in ReduxStack Overflow

最新回复(0)