redux中的加载流和错误状态

我正在构建一个简单的搜索表单,它将在提交表单后显示加载屏幕,并根据获取的结果显示错误。

是否有一个标准的模式来触发加载和错误状态,比如从api中搜索/获取?

我这样做似乎有点过头了——如果我有更多的减速机,我就必须在每个减速机中复制相同的逻辑来清除加载状态

class Search extends Component {
    onSubmit = e => {
        e.preventDefault();
        const { search } = this.props;
        search();
    }

    render() {
        const { error, loading } = this.props;
        return() {
            <>
                <form onSubmit={this.onSubmit}>
                    <input type="submit" value="search" />
                </form>
                {loading && <Loader />}
                {error && <p>{error}</p>}
            </>
        }
    }
}

const mapStateToProps = state => ({
    error: state.error,
    loading: state.loading
});

export default connect(mapStateToProps, {search})(Search);

export const doSearch = (url) => dispatch => {
    dispatch({
        type: LOADING
    })

    fetch(`${url}`)
    .then(response =>
        dispatch({
            type: RECEIVE_DATA,
            payload: response
        })
    )
    .catch(error => {
        dispatch({
            type: ERROR,
            payload: error
        })
    })
}

用户减速器

const initialState = {
    error: '',
    loading: false,
    results: ''
};

export default function(state = initialState, action) {
    switch (action.type) {
        case LOADING:
            return {
                ...state,
                error: '',
                loading: true
            }

        case ERROR:
            return {
                ...state,
                loading: false,
                error: action.payload.message
            }

        case RECEIVE_RESULTS:
            return {
                ...state,
                loading: false,
                results: action.payload.items
            }

        default:
            return state;
        }
    }
}