所以我有这个简单的异步请求动作创建者使用axios用于请求,redux-thunk用于调度动作 . 我想为不同的请求重复使用相同的动作创建器 - 因此每个请求都有自己的状态 . 我将尝试展示一些代码,然后解释更多 . 这是我的动作创作者
function responseOK(response){
return {
type: RESPONSE_OK,
payload: response,
}
}
function loadingChangedStatus(isLoading) {
return {
type: IS_LOADING,
isLoading: isLoading,
}
}
function handleError(errorID){
return {
type: HANDLE_ERROR,
errorID: errorID,
}
}
export function makeRequest( URL){
return function(dispatch, getSate){
dispatch( loadingChangedStatus(true) );
axios.get( URL )
.then(function(response){
dispatch(loadingChangedStatus(false));
dispatch(responseOK(response));
})
.catch(function (response) {
dispatch(loadingChangedStatus(false));
dispatch(handleError('connection_error'));
});
}
}
我的减速机 reducerRequest :
export default function(state = {isLoading:false, payload:false,errorID:false}, action){
switch (action.type) {
case IS_LOADING:
return Object.assign({}, state, {
isLoading: action.isLoading,
});
break;
case RESPONSE_OK:
return Object.assign({}, state, {
isLoading: state.isLoading,
payload: action.payload,
});
break;
case HANDLE_ERROR:
return Object.assign({}, state, {
isLoading: state.isLoading,
payload: action.payload,
errorID:action.errorID,
});
break;
default:
return state;
}
}
HERE STARTS MY PROBLEM
我像这样结合减速器:
import { combineReducers } from 'redux';
import Request from "./reducerRequest";
const rootReducer = combineReducers({
// I WANT EACH OF THESE TO BE SEPARATE INSTANCE BUT USE THE SAME ACTION CREATOR / REDUCER
defaults: Request,
updates: Request,
});
export default rootReducer;
在我的组件中:
function mapStateToProps( {defaults, updates} ){
return {defaults, updates}
}
function mapDispatchToProps( dispatch ){
return bindActionCreators({ makeRequest}, dispatch);
}
问题:我想重新使用我的动作创建者来处理不同的请求 . 我怎么能够
-
调用
makeRequest('www.defaults.com')
并最终在defaults
-
调用
makeRequest('www.updates.com')
并最终在updates
现在,我可以通过图像来解决这个问题的唯一方法是为每个请求编写自己的动作创建者和自己的缩减器 - 只需要大量的复制粘贴 - 感觉不对 .
如何重新使用我的动作创建器和减速器在我的组件中创建 defaults
和 updates
的2个独立实例?
1 回答
您可以为每个操作添加减速器操作的前缀:
然后添加命名空间
然后在调用make请求时使用命名空间
HTH