React Redux 在动作创建者上操作原始数据

Question

在我的 React Redux 应用程序中，我从我的 action creator 上的 API 接收原始数据，然后我进一步对其进行操作，然后将带有精炼数据的 action 分派给 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
    }
};

Answer 1

这不是一个真正的答案，但我不能轻易将其发布在 cmets 中。

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 开发工具工作得很好。如果没有，请放入大量日志语句。你会弄清楚挂的是什么。您的成功方法也很有可能出现错误。我肯定会在 for loop 中添加一条日志记录行，以确保它实际上正在运行和退出。您正在处理来自 fetch 调用的数据，这始终是一个失败点。

还有一些不那么自以为是的东西...... 我在这里看到的问题点是： for (let item of rawAvailability) {rawAvailability 是什么？它实际上是一个数组吗？

基本上我会试试这个：

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

祝你好运！这不是一个真正的答案，这只是我的处理方式。