Reactjs React Redux操作action creator上的原始数据

Reactjs React Redux操作action creator上的原始数据,reactjs,redux,react-redux,Reactjs,Redux,React Redux,在我的React Redux应用程序中,我从action creator上的API接收原始数据,然后在将包含优化数据的操作发送到Reducer之前对其进行进一步操作。然而,在运行时,代码似乎永远不会指向将操作分派到reducer,因为我尝试记录文本,但它从未出现在控制台上。我错过了什么?谢谢你的帮助。下面是相关操作创建者代码 export const getTrainerAvailability = (trainerId) => { console.log('getting her

在我的React Redux应用程序中,我从action creator上的API接收原始数据,然后在将包含优化数据的操作发送到Reducer之前对其进行进一步操作。然而,在运行时,代码似乎永远不会指向将操作分派到reducer,因为我尝试记录文本,但它从未出现在控制台上。我错过了什么?谢谢你的帮助。下面是相关操作创建者代码

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
    }
};
export const getTrainerAvailability=(trainerId)=>{
console.log('getting here',trainerId)
返回异步(调度)=>{
调度(getTrainerAvailabilityRequest());
const token=await AsyncStorage.getItem('token');
获取(url+'gettraineravailability/'+trainerId{
方法:“GET”,
标题:{
“内容类型”:“应用程序/json”,
“授权”:“${token}`
}
})
.then(res=>res.json())
。然后(res=>{
console.log('RES',RES)//{
调度(getTrainerAvailabilityError(错误));
})
}
};
导出常量GetTrainerAvailability成功=(数据)=>{

log('RAW DATA:',DATA[0])//这不是一个真正的答案,但我不能轻易地在评论中发布它

1) 添加一些日志中间件,以便查看发生了什么。我的是:

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) 如果您正在使用一组异步操作(例如等待/重试提取),您可能希望查看
redux saga
。它基本上是为处理异步工作流而构建的

3) 这不是一个完整的示例,因此我无法就其他问题点向您提供任何反馈。例如,缺少方法
getTrainerAvailabilityRequest
&
getTrainerAvailabilityError

4) 添加更多日志记录,如果您无法附加调试器,这是调试此功能的最佳方法。此外,您是否使用调试器?如果您使用源映射进行构建,Chrome开发工具工作得很好。如果没有,请插入大量日志语句。您将了解挂起的原因。您的成功方法中也很有可能出现错误。我将d一定要在
for loop
中放置一个日志行,以确保它实际正在运行和退出。您正在处理来自提取调用的数据,这始终是一个失败点

和不那么固执己见的东西… 我在这里看到的问题是:
for(让rawavasibility项){
什么是
rawavasibility
?它实际上是一个数组吗

基本上我会试试这个:

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) );
        }
    }
根据您的设置,
redux
中抛出的错误可能不会显示。添加日志记录以便您可以查看所有操作和数据,以及在可能的故障点内进行日志记录应该会显示问题


祝你好运!这不是一个真正的答案,这只是我将如何处理它。

我需要看看你是如何调用它的,以便让你了解它可能工作或可能不工作的原因。但是考虑到你的工作流,请看一看
redux-thunk
中间件。它允许分派函数
分派(fn())
我认为在没有中间件的情况下,默认情况下无法调度函数。(编辑:
redux saga
也很适合,但它更复杂)@DanielB.Chapman我在控制台中使用redux thunkno JS error,这可以解释缺少第二个控制台的原因。log?@Florian控制台上没有错误。