Redux:调用相同的api，但调度不同的操作

Question

目前我有一个redux操作，它是getUsers()，用于获取所有用户。

export function getUsers (params) {
return async dispatch => { 
await dispatch({ type: 'GET_USERS_REQUEST' });
const urlParams = params ? new URLSearchParams(Object.entries(params)) : null;
return axios({
method: 'get',
url: Environment.GET_USERS+ `?${urlParams}`,
headers: { 'Content-Type': 'application/json' },
}).then (async res => {
await dispatch({ type: 'GET_USERS_SUCCESS', allUsers: res.data.Data });
}).catch (err => {
dispatch({ type: 'GET_USERS_FAILURE', error: err.toString() });
});
}
}

现在我想使用相同的CCD_ 2，但带有参数id(例如getUsers({ UserId: 'jamesbond007' })(，在行动中，我想dispatch({ type: 'GET_USER_BY_ID_SUCCESS', user: res.data.Data })

如何使用同一个api调用调度不同的操作？我应该复制相同的代码但更改动作调度吗？如果这样做，它就变成了重复功能。

Answer 1

我找到了这样做的方法。我声明变量REQUEST, SUCCESS, FAILURE，并检查param对象是否包含UserId。如果是，它将调度GET_USER_BY_ID而不是GET_USERS。

export function getUsers (params) {
let REQUEST, SUCCESS, FAILURE;
if (!_.isEmpty(params) && params.UserId) {
REQUEST = 'GET_USER_BY_ID_REQUEST';
SUCCESS = 'GET_USER_BY_ID_SUCCESS';
FAILURE = 'GET_USER_BY_ID_FAILURE';
} else {
REQUEST = 'GET_USERS_REQUEST';
SUCCESS = 'GET_USERS_SUCCESS';
FAILURE = 'GET_USERS_FAILURE';
}
return async dispatch => { 
await dispatch({ type: REQUEST });
const urlParams = params ? new URLSearchParams(Object.entries(params)) : null;
return axios({
method: 'get',
url: Environment.GET_USERS+ `?${urlParams}`,
headers: { 'Content-Type': 'application/json' },
}).then (async res => {
await dispatch({ type: SUCCESS, payload: res.data.Data });
}).catch (err => {
dispatch({ type: FAILURE, error: err.toString() });
});
}
}

请注意，在我的减速器中，我只使用action.payload。例如：

case 'GET_USERS_SUCCESS':
return { ...state, isFetching: false, userList: action.payload };
case 'GET_USER_BY_ID_SUCCESS':
return { ...state, isFetching: false, user: action.payload };

Answer 2

您可以通过参数id来决定操作，如

// all users, paramId is null
// a user, paramId is xxxx
const action = paramId ?
{ type: 'GET_USER_BY_ID_SUCCESS', user: res.data.Data } :
{ type: 'GET_USERS_SUCCESS', allUsers: res.data.Data };
dispatch(action);

但是，我认为你的想法不好。最好用两种方法进行逻辑运算。它是可读的。