我试图了解redux中间件的工作原理,在实验过程中,我注意到从redux中间件分派操作可能会导致意外行为。
我将尝试通过模拟文件上传来解释问题,如下所示:
我们有3个动作:
const setProgress = (progress) => ({ type: SET_UPLOAD_PROGRESS, progress });
const setThumbnail = (thumbnail) => ({ type: SET_THUMBNAIL, thumbnail });
const calculateTotal = () => ({ type: CALCULATE_TOTAL });
中间件来计算总数:
export const testMiddleware = (store) => (next) => (action) => {
if (action.type === 'CALCULATE_TOTAL') {
return next(action);
}
const result = next(action);
store.dispatch(calculateTotal());
return result;
};
减速器:
const initialState = {
progress: 0,
total: 0,
thumbnail: ''
};
export function uploadReducer(state = initialState, action) {
switch (action.type) {
case SET_UPLOAD_PROGRESS:
state.progress = action.progress;
return { ...state };
case SET_THUMBNAIL:
state.thumbnail = action.thumbnail;
return { ...state };
case CALCULATE_TOTAL:
state.total += state.progress * 5;
return { ...state };
default:
return state;
}
}
这是模拟文件上传的代码:
let cnt = 0;
// simulate upload progress
const setNewProgress = () => {
cnt += 2;
if (cnt > 5) return;
setTimeout(() => {
store.dispatch(setProgress(cnt * 2));
setNewProgress();
}, 1000);
};
setNewProgress();
// simulate thumbnail generating
setTimeout(() => {
store.dispatch(setThumbnail('blob:http://thumbnail.jpg'));
}, 2500);
这是事件的顺序:
第一个动作按预期方式工作并设置进度值:
问题从这里开始; thumbnail假定是由“ setThumbnail”设置的,但是devtools显示它已由“ calculateTotal”设置,此后的每个调度都不匹配:
我在这里做错了什么?是设计使然?如何在中间件中调度动作而不会导致上述问题?
答案 0 :(得分:1)
此意外行为可能是由于您的uploadReducer
未被pure引起的,即它直接在您的状态下运行(例如state.progress = action.progress;
)。减速器should仅返回新状态,而不修改通过redux注入到减速器中的现有状态。因此,您的减速器应如下所示:
export function uploadReducer(state = initialState, action) {
switch (action.type) {
case SET_UPLOAD_PROGRESS:
return { ...state, progress: action.progress };
case SET_THUMBNAIL:
return { ...state, thumbnail: action.thumbnail };
case CALCULATE_TOTAL:
return { ...state, total: state.total + state.progress * 5 };
default:
return state;
}
}
如何在不引起上述问题的情况下在中间件中调度操作?
您的中间件看起来不错(您正确地防止了递归并且还返回了next()
结果(在您的示例中不是必需的,但在实际应用中仍然有意义)。您的操作也看起来不错(一种样式备注:您可以将操作的有效负载包装在payload
属性中,该属性是常见的convention)。