Т.к. ajax запросы асинхронные то на каждый такой запрос делается 3 ветки развития событий:
- запрос отправлен
- запрос завершился успешно
- запрос завершился с ошибкой
В коде это будет выглядеть как-то так
export function loadInfo() {
return dispatch => {
dispatch({
type: 'LOAD_INFO_REQUESTED'
});
request.get(
Routes.root_path(),
{headers: {'Accept': 'application/json'}}
)
.then(result => {
dispatch({
type: 'LOAD_INFO_OK',
info: result.data
})
})
.catch(result => {
dispatch({
type: 'LOAD_INFO_FAIL',
errors: result.statusText
})
})
}
}
Т.е. сначала экшн оповещает хранилище(store) что начал запрос и делает сам запрос. Далее в зависимости от результата хранилище будет оповещено либо от успехе либо об неудаче.
Чтобы получить доступ к dispatch внутри экшена используется redux-thunk, который вы уже установили.
Далее редуцер, обрабатывается 3 типа событий из экшена
const defaultState = { loading: false, info: null, errors: null };
export default function info(state = defaultState, action) {
switch (action.type) {
case LOAD_INFO_REQUESTED:
return { loading: true };
case LOAD_INFO_OK:
return { loading: false, info: action.info, errors: null };
case LOAD_INFO_FAIL:
return { loading: false, info: null, errors: action.errors };
default:
return state;
}
}
Компонент должен быть подключен к хранилищу с помощью connect, без него компонент не увидит store
@connect(state => ({
info: state.info
}))
class Info extends Component {
componentDidMount() {
const { dispatch } = this.props;
dispatch(loadInfo()) // Вызываем загрузку
}
render() {
const { loading, info, errors } = this.props.info;
if (loadind) { return (<div>Loading</div>) }
if (errors != null) { return (<div>Error!</div>) }
return (
<div>
{ info }
</div>
);
}
}
Вобщем как-то так. В хэлпе на redux это все описано.
