Я создаю простую форму поиска, которая будет отображать экран загрузки после отправки формы и ошибок в зависимости от результатов выборки.
Существует ли стандартный шаблон для запуска состояний загрузки и ошибок притакое действие, как поиск / извлечение из 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;
}
}
}