如何重构 redux + thunk 动作/常量

Posted 2023-02-22

【中文标题】如何重构 redux + thunk 动作/常量

【英文标题】：How to refactor redux + thunk actions/constants

【发布时间】：2017-07-27 11:21:39

【问题描述】：

在我的 react/redux/thunk 应用程序中，我使用如下操作：

function catsRequested() 
    return 
        type: CATS_REQUESTED,
        payload: ,
    ;


function catsReceived(landings) 
    return 
        type: CATS_RECEIVED,
        payload: landings,
    ;


function catsFailed(error) 
    return 
        type: CATS_FAILED,
        payload:  error ,
    ;


export const fetchCats = () => ((dispatch, getState) => 
    dispatch(catsRequested());
    return catsAPI.loadCats()
        .then((cats) => 
            dispatch(catsReceived(cats));
        , (e) => 
            dispatch(catsFailed(e.message));
        );
);

处理一些数据（简化）。一切正常，但我为每个数据实体（以及常量）都有很多代码。 我的意思是狗，老虎，鸟等的相同功能......

我看到每个实体都有类似的请求/接收/失败操作/常量。

根据 redux-thunk 缩小代码的正确方法是什么？

【问题讨论】：

考虑npmjs.com/package/redux-api-middleware

【参考方案1】：

您可以通过创建类型和 thunk 创建者来保持代码 DRY：

类型：

const createTypes = (type) => (
    request: `$type_REQUESTED`, 
    received: `$type_RECEIVED`, 
    failed: `$type_FAILED`, 
);

重击：

const thunkCreator = (apiCall, callTypes) => ((dispatch, getState) => 
    dispatch( type: callTypes.request );

    return apiCall
        .then((payload) => 
            dispatch( type: callTypes.received, payload ));
        , (e) => 
            dispatch( type: callTypes.failed, payload: e.message ));
        );
);

现在你可以用 2 行代码创建一个 fetch 方法：

export const fetchCatsTypes = createTypes('CATS'); // create and export the constants
export const fetchCats = (catsAPI.loadCats, fetchCatsTypes); // create and export the thunk

export const fetchDogsTypes = createTypes('DOGS'); // create and export the constants
export const fetchDogs = (dogsAPI.loadDogs, fetchDogsTypes ); // create and export the thunk

注意：您还将在减速器中使用类型常量 (fetchDogsTypes)。