时间戳

首页 > 解决方案 > React Redux 在动作创建者上操作原始数据

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

问题描述

在我的 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
    }
};

标签： reactjsreduxreact-redux

解决方案

这不是一个真正的答案，但我不能轻易地在评论中发布它。

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

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

推荐阅读