React Redux Manipulating Raw Data on action creator - reactjs

Question

on my React Redux app, I am receiving the raw data from the API on my action creator, which I then manipulate further before dispatching the action with the refined data to Reducer. However, when running, the code seems to never make it down to point at dispatches the action to reducer, since I try to log texts and it never comes up on the console. What am I missing? I appreciate any help. Relevant action creators code below...
export const getTrainerAvailability = (trainerId) => {
console.log('getting here', trainerId)
return async (dispatch) => {
dispatch(getTrainerAvailabilityRequest());
const token = await AsyncStorage.getItem('token');
fetch(url + 'gettraineravailability/' + trainerId, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `${token}`
}
})
.then(res => res.json())
.then(res => {
console.log('RES', res) // <-- logs as expected
if (res.error) {
console.log('error')
throw(res.error);
}
dispatch(getTrainerAvailabilitySuccess(res));
})
.catch(error => {
dispatch(getTrainerAvailabilityError(error));
})
}
};
export const getTrainerAvailabilitySuccess = (data) => {
console.log('RAW DATA: ', data[0]) // <-- this is logged as expected
const rawAvailability = data[0]
let mondayAvailability = [];
let tuesdayAvailability = [];
let wednesdayAvailability = [];
let thursdayAvailability = [];
let fridayAvailability = [];
let saturdayAvailability = [];
let sundayAvailability = [];
for (let item of rawAvailability) {
if (item.week_day === 'Monday') {
mondayAvailability.push(item);
}
else if (item.week_day === 'Tuesday') {
tuesdayAvailability.push(item);
}
else if (item.week_day === 'Wednesday') {
wednesdayAvailability.push(item);
}
else if (item.week_day === 'Thursday') {
thursdayAvailability.push(item);
}
else if (item.week_day === 'Friday') {
fridayAvailability.push(item);
}
else if (item.week_day === 'Saturday') {
saturdayAvailability.push(item);
}
else if (item.week_day === 'Sunday') {
sundayAvailability.push(item);
}
}
console.log('im here', mondayAvailability) // this is not logged
const interval = moment.duration(30, 'minutes');
let startTime;
let endTime
let arrayLength;
let slotTime;
let refinedData;
// further array manipulation...
console.log('REFINED DATA: ', refinedData) // <- this is not logged
return {
type: 'GET_TRAINER_AVAILABILITY_SUCCESS',
payload: refinedData
}
};

Answer 1

This isn't really an answer, but I can't post it easily in the comments.
1) Add some logging middleware so you can see what's going on. Mine is this:
const logger = store => next => action => {
//LOTS OF LOGGING
//console.log('[DISPATCHING] %s', action.type, JSON.stringify(action) )
//SOME LOGGING
console.log('[DISPATCHING] %s', action.type)
const result = next(action)
console.log('[NEXT STATE]', store.getState())
return result
}
2) If you're using a set of asynchronous actions (waiting/retrying a fetch for instance) you might want to check out redux-saga. It was basically built to deal with asynchronous workflows.
3) This isn't a complete example so I can't give you any feedback on other problem points. there are missing methods getTrainerAvailabilityRequest & getTrainerAvailabilityError for example
4) Add more logging, it is the best way to debug this if you can't attach a debugger. Also, are you using a debugger? Chrome development tools work quite well if you build with source maps. If not, drop in a lot of log-statements. You'll figure out what's hanging. There's also a really good chance there's an error in your success method. I would definitely put a logging line in that for loop to make sure it is actually running and exiting. You're processing data from a fetch call, that is always a failure point.
And onto the less opinionated stuff...
The problem point I see here is:
for (let item of rawAvailability) { What is rawAvailability? Is it actually an array?
Basically I'd try this:
for (let item of rawAvailability) {
console.log(`[DEBUG]`, JSON.stringify(item, null, 2) );
if (item.week_day === 'Monday') {
mondayAvailability.push(item);
}
else if (item.week_day === 'Tuesday') {
tuesdayAvailability.push(item);
}
else if (item.week_day === 'Wednesday') {
wednesdayAvailability.push(item);
}
else if (item.week_day === 'Thursday') {
thursdayAvailability.push(item);
}
else if (item.week_day === 'Friday') {
fridayAvailability.push(item);
}
else if (item.week_day === 'Saturday') {
saturdayAvailability.push(item);
}
else if (item.week_day === 'Sunday') {
sundayAvailability.push(item);
} else {
console.log(`[INVALID_ITEM]`, JSON.stringify(item, null, 2) );
}
}
Depending on your setup an error thrown in redux may not show up. Adding logging so you can see all your actions and data as well as logging inside possible failure points should show you the problem.
Good luck! This isn't really an answer, it is just how I would approach it.