CordovaでreduxでReactアプリを正しく初期化する方法 - mapStateToPropsが呼び出されていない

Question

React + Reduxで実装されたゲームパイロットがあり、通常のブラウザ（ウェブ版）でもうまく動作します。

最終目標であるCordovaで実行している場合、レデューサーがデータを処理した直後に停止します（サーバーからのトークン）。状態の変更は、接続されたコンテナのmapStateToPropsメソッドに渡されていません。ウェブ版では魅力的に機能します。

"接続"が実現していないようです...何とかしてください。 MapStateToPropsは、レデューサーの作業が終了した後では呼び出されませんが、これはCordovaで実行している場合にのみ発生します。

私はアプリの起動時に問題が発生していると思われます。私は 'deviceready'イベントのための必須の待遇の変種を研究し、検索しました。 "面倒" コンテナが次のようになります

import React from "react"; 
import ReactDOM from "react-dom"; 
import {Provider} from "react-redux"; 
import {Router, Route, IndexRoute, useRouterHistory, hashHistory} from "react-router"; 
import {createHashHistory} from "history"; 
import App from "./components/app"; 
import Game from "./components/game"; 
import Frontpage from "./components/frontpage"; 
import {store} from "./store"; 

function startApp() { 
    ReactDOM.render(
    <Provider store={store}> 
     <Router history={hashHistory}> 
     <Route path="/" component={App}> 
      <IndexRoute component={Frontpage}/> 
      <Route path="game" component={Game}/> 
     </Route> 
     </Router> 
    </Provider> 
    , document.querySelector('.my-container') 
); 
} 

const url = document.URL; 
const isSmart = (url.indexOf("http://") === -1 && url.indexOf("https://")  === -1); 
const isRipple = (url.indexOf(":3000") !== -1); 

if (isSmart || isRipple) { 
    document.addEventListener('deviceready', startApp, false); 
} else { 
    startApp(); 

} 

（frontpage.js）：これは私のindex.jsxコードです

import React, {Component} from "react"; 
import {connect} from "react-redux"; 
import * as actions from "../actions"; 
import {hashHistory} from "react-router"; 

class Frontpage extends Component { 

    componentWillMount() { 
    if (this.props.token) { 
     hashHistory.push("/game"); 
    } else { 
     this.props.fetchToken(this.props.handleMessageFromChannel); 
    } 
    } 

    componentWillUpdate(nextProps) { 
    if (nextProps.token) { 
     hashHistory.push("/game"); 
    } 
    } 

    render() { 
    return <div className="frontpage"></div> 
    } 
} 

function mapStateToProps(state) { 
    return { token: state.token }; 
} 

export default connect(mapStateToProps, actions)(Frontpage); 

そして店はstore.jsに定義されています。

import reducers from "./reducers/index"; 
import ReduxPromise from "redux-promise"; 
import {createStore, applyMiddleware} from "redux"; 

export const store = applyMiddleware(ReduxPromise)(createStore)(reducers); 

ファイルtoken_reducer.jsでトークン減速：

import {FETCH_TOKEN} from "../actions/types"; 

export default function (state = null, action) { 
    switch (action.type) { 
    case FETCH_TOKEN: 
     return action.payload.data.token; 
    } 

    return state; 
} 

GoogleとSOの検索で、同じ問題を抱える人が見つかりませんでした。 関連性がある場合、私は喜んでもっと多くのファイルを投稿します...？

Answer 1

エラーがどこかだった...他の減速の

一つは捕まってしまった - あるいは失敗した - とアクションの処理を停止させました。コンソールに警告やエラーはありませんでしたので、問題を特定するのは難しい作業でした。

なぜCordovaでの動作が異なりますか？ 他の減速が（サーバー送信されるイベントを受信するため）のEventSourceオブジェクトを作成し、それがhttpsまたはhttpこと、オリジナルのプロトコルを使用するので、私はそれを作成した「学校帳パターン」あたり：

const eventSource = new EventSource("//192.168.1.2:8080/api/channel...); 
eventSource.onmessage = function(message) { 
    store.dispatch(handleMessageFromChannel(message.data)) 
}; 

しかし、これはしませんロードされたJavaScriptのプロトコルがのファイル：//であるため、Cordovaでうまくいきます。明らかに、デバイスのファイルシステムに対してEventSourceを確立するのは間違いです。

正しいコードは次のようになります。生産のためにできれ適切なURLとhttpsになります

const eventSource = new EventSource("http://192.168.1.2:8080/api/channel...); 
eventSource.onmessage = function(message) { 
    store.dispatch(handleMessageFromChannel(message.data)) 
}; 

を...。