Redux：调用相同的 api 但调度不同的操作答案

【问题标题】：Redux: Call the same api but dispatch different actionsRedux：调用相同的 api 但调度不同的操作
【发布时间】：2021-01-29 17:00:06
【问题描述】：

目前我有一个 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() });
        });
    }
}

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

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

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

您可以通过参数 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);

但是，我认为你的想法并不好。最好用两种方法做逻辑。它是可读的。

【讨论】：

【解决方案2】：

我找到了这样做的方法。我声明变量REQUEST, SUCCESS, FAILURE 并检查参数对象是否包含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 };

【讨论】：