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