Т.к. 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 это все описано.

connect нужен для того чтобы подписать компонент на события редуцера и дать доступ к данным редуцера. А роутинг он вообще в стороне от redux (хотя, конечно, есть роутеры, работающие через redux).

Я обычно придерживаюсь следующего: connect применяю к компонентам-контейнерам верхнего уровня, которыми управляет роутер(в вашем случае это Component-1, Component-2). Во все остальные простые (dumb) компоненты, находящиеся в контейнере, данные получают в параметрах (через props) от контейнера.

Если вложенные компоненты должны как-то взаимодействовать с redux: для этого в компоненте-контейнере определяются функции, которые видят редуцеры и dispatch. Дальше эти функции отдаются dumb-компонентам через props и они их могут вызвать по какому-то своему событию.

Теоретически вы можете делать connect к любому компоненту, но во первых это более накладно по ресурсам и во вторых это убивает инкапсуляцию. Прелесть т.н. "тупых" компонентов в том что они простые и зависят только от явных параметров (props) и следовательно легко переносимы. Добавляя к ним connect мы прибиваем их гвоздями к модели данных конкретного приложения.