重用 Redux-react 异步请求操作创建者/reducer
Reusing Redux-react async request action creator / reducer
所以我有这个简单的异步请求操作创建器,使用 axios for requests and 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'));
});
}
}
还有我的reducer 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;
}
}
我的问题从这里开始
我这样组合减速器:
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
中结束
现在我想解决这个问题的唯一方法是为每个请求编写自己的 action creator 和 reducer - 只是大量的复制粘贴 - 这感觉不对。
如何重用我的 action creator 和 reducer 在我的组件中创建 defaults
和 updates
的 2 个独立实例?
您可以为每个操作的减速器操作添加前缀:
export default function(namespace)
return function(state = {isLoading:false, payload:false,errorID:false}, action){
switch (action.type) {
case namespace + IS_LOADING:
return Object.assign({}, state, {
isLoading: action.isLoading,
});
break;
case namespace + RESPONSE_OK:
return Object.assign({}, state, {
isLoading: state.isLoading,
payload: action.payload,
});
break;
case namespace + HANDLE_ERROR:
return Object.assign({}, state, {
isLoading: state.isLoading,
payload: action.payload,
errorID:action.errorID,
});
break;
default:
return state;
}
}
}
然后添加命名空间
function responseOK(namespace, response){
return {
type: namespace + RESPONSE_OK,
payload: response,
}
}
const rootReducer = combineReducers({
// I WANT EACH OF THESE TO BE SEPARATE INSTANCE BUT USE THE SAME ACTION CREATOR / REDUCER
defaults: Request("DEFAULTS_"),
updates: Request("UPDATES_"),
});
然后在调用 make 请求时使用命名空间
call makeRequest('DEFAULTS_', 'www.defaults.com') and it ends up in defaults
call makeRequest('UPDATES_', 'www.updates.com') and it ends up in updates
HTH
所以我有这个简单的异步请求操作创建器,使用 axios for requests and 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'));
});
}
}
还有我的reducer 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;
}
}
我的问题从这里开始
我这样组合减速器:
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
中结束
现在我想解决这个问题的唯一方法是为每个请求编写自己的 action creator 和 reducer - 只是大量的复制粘贴 - 这感觉不对。
如何重用我的 action creator 和 reducer 在我的组件中创建 defaults
和 updates
的 2 个独立实例?
您可以为每个操作的减速器操作添加前缀:
export default function(namespace)
return function(state = {isLoading:false, payload:false,errorID:false}, action){
switch (action.type) {
case namespace + IS_LOADING:
return Object.assign({}, state, {
isLoading: action.isLoading,
});
break;
case namespace + RESPONSE_OK:
return Object.assign({}, state, {
isLoading: state.isLoading,
payload: action.payload,
});
break;
case namespace + HANDLE_ERROR:
return Object.assign({}, state, {
isLoading: state.isLoading,
payload: action.payload,
errorID:action.errorID,
});
break;
default:
return state;
}
}
}
然后添加命名空间
function responseOK(namespace, response){
return {
type: namespace + RESPONSE_OK,
payload: response,
}
}
const rootReducer = combineReducers({
// I WANT EACH OF THESE TO BE SEPARATE INSTANCE BUT USE THE SAME ACTION CREATOR / REDUCER
defaults: Request("DEFAULTS_"),
updates: Request("UPDATES_"),
});
然后在调用 make 请求时使用命名空间
call makeRequest('DEFAULTS_', 'www.defaults.com') and it ends up in defaults
call makeRequest('UPDATES_', 'www.updates.com') and it ends up in updates
HTH