Бесполезный велосипед изобретаете.
Вариант 1. Если используете
redux-thunk:
export const handleError = error => ({ type: 'NEW_ERROR', payload: error });
export const doSomething = data => ({ type: 'DO_SOMETHING', payload: data });
import { apiCall } from './api';
import { handleError, doSomething } from './actionCreators';
export const asyncAction = () => dispatch => {
try {
const result = await apiCall();
dispatch(doSomething(result));
return result;
} catch (e) {
dispatch(hanldeError(e));
}
};
аналогичным образом можно использовать блок
catch если используете
redux-saga.
Если еще не используете, одно из этих
middleware, то рекомендую скорей познакомиться с ними и начать использовать.
Вариант 2. Если не используете:
export const handleError = error => ({ type: 'NEW_ERROR', payload: error });
export const doSomething = data => ({ type: 'DO_SOMETHING', payload: data });
import { connect } from 'react-redux';
import { apiCall } from './api';
import { handleError, doSomething } from './actionCreators';
class ExampleComponent extends React.Component {
componentDidMount() {
const { dispatch } = this.props;
apiCall().then(
res => dispatch(doSomething(res)),
err => dispatch(handleError(err)),
);
}
render() { /* ... */ }
}
export default connect()(ExampleComponent);
или:
import { connect } from 'react-redux';
import { apiCall } from './api';
import { handleError, doSomething } from './actionCreators';
class ExampleComponent extends React.Component {
componentDidMount() {
const { doSomething, handleError } = this.props;
apiCall().then(
res => doSomething(res),
err => handleError(err),
);
}
render() { /* ... */ }
}
mapDispatchToProps = {
handleError,
doSomething,
};
export default connect(null, mapDispatchToProps)(ExampleComponent);
Вообще, самый простой способ сделать
dispatch в
store это:
store.dispatch(someAction());
Прежде чем начнете изобретать очередной велосипед, настоятельно рекомендую хорошо изучить документацию
react,
redux и
react-redux.
