Why is my reducer not triggered using redux?

Question

Good morning everyone,

I just set up redux on my react project. What i am willing to do is to get data when the component Dashboard is rendered. Data are expenses and incomes variables, which are the sum of all the expenses and incomes.

The problem i get is that my reducer is never triggered. I get no error in my console. As you can see in actions/dashboard.js, i consoled log when the call to fetchdata is done, and is working correctly. but the call to setBalance does not.

In the reducers/dashboard.js, in the switch case, the default case is always triggered, it's like it does not find the action type.

My Component Dashboard.js

import React, {useEffect} from 'react'

import classes from './Dashboad.module.css'
import { Doughnut } from 'react-chartjs-2'
import {connect} from 'react-redux'
import * as actions from '../../store/actions/index'

const DashBoard = (props) => {

    useEffect(() => {
        props.onFetchData()
    }, [])
// ----------------------------------- Hidden code to not overload the topic -------------------
const mapStateToProps = state => {
    return {
        incomes: state.incomes,
        expenses: state.expenses
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onFetchData: () => dispatch(actions.fetchData),
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(DashBoard);

actions/index.js :

export {
    fetchData
} from './dashboard'

actions/actionsTypes.js :

export const SET_BALANCE = 'SET_BALANCE'

actions/Dashboard.js

import * as actionsTypes from './actionsTypes'
import axios from '../../axios'

export const setBalance = (donnees) => {
    console.log('setbalance')
    return {
        type: actionsTypes.SET_BALANCE, 
        donnees: donnees
    }
}

export const fetchData = () => {
    console.log('call fetchdata')
    return dispatch => {
        axios.get('/movements.json')
        .then(response => {
            dispatch(setBalance(response.data))
            console.log(response.data)
        })
        .catch(error => console.log(error))
    }
}

Reducers/Dashboard.js :

import * as actionsTypes from '../actions/actionsTypes'

const initialState = { 
    incomes: 0, 
    expenses: 0
}

const setBalance = (state, action) => {
    let fetchedMvts = []
    for(let key in action.donnees.data) {
        fetchedMvts.push({...action.donnees.data[key]})
    }
    let sumIncome = 0;
    let sumOutcome = 0;
    fetchedMvts.forEach(element => {
        let parsed = parseInt(element.amount, 10)
        if(element.type === "income") {
            sumIncome = sumIncome + parsed;
        } else {
            sumOutcome = sumOutcome + parsed;
        }
    })
    return {...state, incomes: sumIncome, expenses: sumOutcome}
}

const reducer = (state= initialState, action) => {
    console.log('TYPE', action.type)
    switch (action.type) {
        case actionsTypes.SET_BALANCE: return setBalance(state, action);
        default: 
        console.log('problem')
        return state;
    }
}

export default reducer;

And, in case you need it, the index.js file of my app :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux'
import { createStore, applyMiddleware} from 'redux'
import * as serviceWorker from './serviceWorker';
import RootReducer from './store/reducers/dashboard'
import thunk from 'redux-thunk'

const store = createStore(RootReducer, applyMiddleware(thunk))

ReactDOM.render(
  
    
    
  
  ,
  document.getElementById('root')
);

serviceWorker.unregister();

Thank you for your help guys

Have a nice day

Why is my reducer not triggered using redux?

0 Answers