How does dispath work in React or how does redux update signature work?

Question

React

Good afternoon.
I decided to use the assembly https://github.com/luigiplr/react-router-redux-rxj...
the point is that it breaks the bundle into pages. But I can't figure out how the store is connected to the component.
Subscribed the component to the store, but the component doesn't care that the store was updated via dispatch.
if I call action via props, like this.props.getTransports() , then the update happens. But this is quite inconvenient when you need to communicate with the server, you have to fence the garden with promises. Now, for example, you need to send to receive web sockets, without dispatch it is, to put it mildly, not convenient.

export function getTransports(){
//тут ее получаю от сервера
return{
        	      type: 'GET_transport',
        setTransportData: data
  }
}

messageStatusssss

export default connect(
      state => ({
        TransportData: state.globalR.controlR.TransportData,
        login: state.globalR.authorizationR.login,
        token: state.globalR.authorizationR.token,
        messageStatus: state.globalR.authorizationR.messageStatus,
        messageStatusssss: state.globalR.authorizationR.messageStatusssss
      }), 
      dispatch => bindActionCreators(ActionCreator, dispatch)
)(controlPage)

as far as I figured out the main feature occurs in this function

export default function asyncRoute(getComponent, getReducers) {
  return class AsyncRoute extends Component {
    static contextTypes = {
      store: PropTypes.shape({
        dispatch: PropTypes.func.isRequired
      })
    }

    static Component = null
    static ReducersLoaded = false

    state = {
      Component: AsyncRoute.Component,
      ReducersLoaded: AsyncRoute.ReducersLoaded
    }

    componentWillMount() {
      const { Component, ReducersLoaded } = this.state
      const shouldLoadReducers = !ReducersLoaded && getReducers
      if (!Component || shouldLoadReducers) {
        this._componentWillUnmountSubject = new Subject()
        const streams = [
          Component
            ? Observable.of(Component)
                .takeUntil(this._componentWillUnmountSubject)
            : Observable.fromPromise(getComponent())
                .map(esModule)
                .map(Component => {
                  AsyncRoute.Component = Component
                  return Component
                })
                .takeUntil(this._componentWillUnmountSubject)
        ]

        if (shouldLoadReducers) {
          streams.push(
            Observable.fromPromise(getReducers())
              .map(module => esModule(module, true))
              .map(reducers => {
                this.context.store.dispatch(injectReducers(reducers))
                AsyncRoute.ReducersLoaded = true
//вот тут  store, за которым следят компоненты (насколько я понял), console.log(this.context.store)
//но как в него делать диспатч не могу понять, в store.getState(), показывается только 
//основной редюсер, в сборке он
//dummy редюсер в index.js я вместо него сделал combineReducer назвал globalR

              })
              .takeUntil(this._componentWillUnmountSubject)
          )
        }

        Observable.zip(...streams)
          .takeUntil(this._componentWillUnmountSubject)
          .subscribe(([Component]) => {
            if (this._mounted) {
              this.setState({Component})
            } else {
              this.state.Component = Component
            }

            this._componentWillUnmountSubject.unsubscribe()
          })
      }
    }

    componentDidMount() {
      this._mounted = true

    }

    componentWillUnmount() {
      if (this._componentWillUnmountSubject && !this._componentWillUnmountSubject.closed) {
        this._componentWillUnmountSubject.next()
        this._componentWillUnmountSubject.unsubscribe()
      }
    }

    render() {

      const { Component } = this.state
      return Component ? <Component {...this.props} /> : null
    }
  }
}


// в App я вот так объявляю какое хранилище подключать к компоненту
const Form = asyncRoute(() => import('./pages/form'), () => import('reducers/index.js'))

Answer 1

Long story short, I didn't read it.
Briefly
To sign, use the react-redux library. She will sign backstage. Eventually:
connect - connects storage.
mapStateToProps - highlights part or all of the state. Maybe you want to give out only one some field.
mapDispatchToProps - whatever will be returned here will be dispatched.
Example:

function mapDispatchToProps(dispatch) {
  return {
    downloadTickets: ()=>{
      dispatch(actions.downloadTickets);
    },
    setSelectValues: (value)=>{
      dispatch(actions.setSelectValues(value));
    },
    setActvePage: (value)=>{
      dispatch(actions.setActvePage(value));
    },
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

In mapDispatchToProps , dispatch is passed under the hood , everything returned from this function will be available in props.
props.downloadTickets

Answer 2

the question remains open.
As for the assembly, the chest opened simply.
in the file store do export let store = createStore();
In the entry file, we import this store into the provider, instead of createStore()
, and together with the dummy reducer we do
ps and so on the side is the best solution that I found for multipage aplication on clientside.
thanks to the article https://habrahabr.ru/company/Voximplant/blog/270593/