поток загрузки и состояние ошибок в редуксе - PullRequest
0 голосов
/ 02 декабря 2018

Я создаю простую форму поиска, которая будет отображать экран загрузки после отправки формы и ошибок в зависимости от результатов выборки.

Существует ли стандартный шаблон для запуска состояний загрузки и ошибок притакое действие, как поиск / извлечение из 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);

userActions

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
        })
    })
}

userReducers

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;
        }
    }
}

1 Ответ

0 голосов
/ 02 декабря 2018

По-моему, то, как вы подошли к проблеме, совершенно нормально.Именно так мы обычно и поступаем, меняя значение загрузки в хранилище приставок по мере необходимости.Хотя соглашение об именах, которое часто используется, заключается в том, чтобы называть его isLoading вместо «loading».
Вы находите какие-либо проблемы с текущей реализацией, на которые вы ищете ответ?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...