Store values not changing after dispatch - reactjs

Question

I am new to react redux and I am facing an issue with store note changing it values. I read a manual and then implemented the reducer and action. Implemented ACTION AND Reducer but state is not getting updated. Any help would be appreciated.
See below for my component file
import React from 'react'
import { Grid } from 'semantic-ui-react'
import uuid from 'uuid'
import axios from 'axios'
import _ from 'lodash'
import PropTypes from "prop-types";
import EditableTimerList from './EditableTimerList'
import ToggleableTimerForm from './ToggleableTimerForm'
import { newTimer } from './helpers'
import { updateAll, createUrlWithParams, updateTrackOnStartOrStop } from './services';
import Filters from './Filters';
import { connect } from "react-redux";
import {getDataForTimerDashBoard} from '../actions/timerAction';
var querystring = require('querystring');
class TimerDashboard extends React.Component {
constructor () {
super()
this.queryJson = { runningSince: '', title: ''};
this.state = {
timers: [
{
title: 'The default one',
description: 'This is a description',
elapsed: null,
runningSince: null,
id: uuid.v4(),
updateDate: new Date().toISOString()
}
]
}
};
componentDidMount() {
this.getData(this);
console.log(this.props.timers);
}
getData(that) {
this.props.getDataForTimerDashBoard(this.state.timers);
}
updateTimer (attrs) {
}
createTimer (timer) {
}
deleteTimer (timerId) { }
startTimer (timerId) {
}
stopTimer (timerId) {
}
onQueryChange(query) {
}
saveDataToState(that, data) {
}
render () {
const onQueryChange = _.debounce((query)=>{this.onQueryChange(query)}, 400);
return (
<div className="container">
<div className="row">
<EditableTimerList
timers={this.state.timers}
onFormSubmit={attrs => this.updateTimer(attrs)}
onTrashClick={timerId => this.deleteTimer(timerId)}
onStartClick={timerId => this.startTimer(timerId)}
onStopClick={timerId => this.stopTimer(timerId)}
/>
<ToggleableTimerForm
onFormSubmit={timer => this.createTimer(timer)}
/>
<Filters
onTextChange={(query)=>{onQueryChange(query)}}
onCheckboxChange={(query)=>{this.onQueryChange(query)}}
/>
</div>
</div>
)
}
}
TimerDashboard.propTypes = {
getDataForTimerDashBoard: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
errors: PropTypes.object.isRequired,
timers: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth,
errors: state.errors,
timers: state.timers
});
export default connect(
mapStateToProps,
{getDataForTimerDashBoard}
)(TimerDashboard);
Store.js
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
//window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
export default store;
See below fro my type file
type.js
export const GET_ERRORS = "GET_ERRORS";
export const USER_LOADING = "USER_LOADING";
export const SET_CURRENT_USER = "SET_CURRENT_USER";
export const LOAD_TIMER_DATA = "LOAD_TIMER_DATA";
reducer.js
import {LOAD_TIMER_DATA} from "../actions/types";
import uuid from 'uuid';
const isEmpty = require("is-empty");
const initialState = {
isAuthenticated: false,
user: {},
loading: false,
timers: {}
};
export default function (state = initialState, action) {
switch (action.type) {
case LOAD_TIMER_DATA:
console.log(action)
return {
...state,
isAuthenticated: !isEmpty(action.payload.usertoken),
user: action.payload.usertoken,
timers: action.payload.timers
};
default:
return state;
}
}
Timeraction
import axios from "axios";
import jwt_decode from "jwt-decode";
import {GET_ERRORS, LOAD_TIMER_DATA} from "./types";
var querystring = require('querystring');
// Register User
export const getDataForTimerDashBoard = (timerData) => async dispatch => {
const token = localStorage.getItem("jwtToken");
const decoded = jwt_decode(token);
//If no data remains in db, put the two dummy data of state into the db
await axios.get('/getAll').then(function (response) {
let savedTimers = [];
if (response.data.length === 0) {
timerData.timers.forEach((timer) => {
axios.post('/insert',
querystring.stringify(timer), {
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
}).then(function (response) {
timer.id = response.data.id
savedTimers.push(timer);
dispatch({
type: LOAD_TIMER_DATA,
payload: savedTimers
})
}).catch(err => {
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
});
});
} else {
alert(response.data);
const payload ={};
payload.timers = response.data;
payload.usertoken = decoded;
dispatch({
type: LOAD_TIMER_DATA,
payload: payload,
})
}
});
};

Answer 1

I think there is an issue in the code, while dispatching in payload you are pushing only SavedTimers but in reducer, you are trying to access userToken
savedTimers.push(timer);
dispatch({
type: LOAD_TIMER_DATA,
payload: savedTimers
})
Please add userToken also to your payload.
EDIT
import axios from "axios";
import jwt_decode from "jwt-decode";
import {GET_ERRORS, LOAD_TIMER_DATA} from "./types";
var querystring = require('querystring');
// Register User
export const getDataForTimerDashBoard = (timerData) => async dispatch => {
const token = localStorage.getItem("jwtToken");
const decoded = jwt_decode(token);
const payload ={};
payload.usertoken = decoded;
//If no data remains in db, put the two dummy data of state into the db
await axios.get('/getAll').then(function (response) {
let savedTimers = [];
if (response.data.length === 0) {
timerData.timers.forEach((timer) => {
axios.post('/insert',
querystring.stringify(timer), {
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
}).then(function (response) {
timer.id = response.data.id
savedTimers.push(timer);
payload.timers = savedTimers;
dispatch({
type: LOAD_TIMER_DATA,
payload: payload,
})
}).catch(err => {
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
});
});
} else {
payload.timers = response.data;
dispatch({
type: LOAD_TIMER_DATA,
payload: payload,
})
}
});
};