2016-04-14 28 views
3

React + Redux ile uygulanan bir oyun pilotum var ve normal bir tarayıcıda (web sürümü) gayet iyi çalışıyor.Doğru bir şekilde başlatmayı Cordova'da redux ile nasıl yeniden başlatırsınız? MapStateToProps olarak adlandırılmadı

Cordova ile (son hedef olan) çalışırken, redüktörler verileri işledikten hemen sonra durur (sunucudan bir simge). Durum değişikliği, bağlı konteynerdeki mapStateToProps yöntemine aktarılmıyor. Web sürümünde bir çekicilik gibi çalışır.

"Bağlan" bir şekilde yerine getirilmemiş gibi görünüyor. Redüktörler çalışmalarını bitirdikten sonra mapStateToProps çağrılmaz, ancak bu sadece Cordova'da çalışırken gerçekleşir!

Sorun, uygulamanın başlatılmasında tümüyle başladığından şüpheleniyorum. 'Deviceready' olayı için zorunlu bekleme çeşitlerini araştırdım ve araştırdım. "Zahmetli" kapsayıcı şöyle

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): Bu benim index.jsx kodudur

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); 

Ve mağaza store.js tanımlanır:

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

export const store = applyMiddleware(ReduxPromise)(createStore)(reducers); 
dosya token_reducer.js içinde

belirteç redüktör:

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 ve SO aramalarından, aynı sorunu olan kimseyi bulamadım. İlgilendiğim takdirde daha fazla dosya gönderebilir miyim ...?

hata başka bir yerde oldu

cevap

1

... diğer REDÜKTÖRLE

Bir saplanıp - veya başarısız - ve eylem işleme durdurmaya neden oldu. Konsolda hiçbir uyarı ya da hata yoktu, bu yüzden sorunu belirlemek zor oldu.

Neden Cordova'daki farklı davranışlar? diğer redüktör (Sunucu Sent Olaylar almak için) bir EventSource nesnesi oluşturur ve bu, orijinal protokolü kullanan olurdu böylece "okul defteri desenleri" Ben oluşturulduğu başına bunun https veya http:

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

Ama bu olmaz yüklenen JavaScript protokolü dosya: // olduğundan ve aygıtın dosya sistemine doğru EventSource kurmak için açıkça yanlış olduğundan, Cordova iyi oynayabilirsiniz.

doğru kod olmalıdır: üretim için preferrably doğru bir URL ve https olacaktır

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

....

İlgili konular