verwenden Speicherfunktionen (Versand, GetState,) außerhalb Komponenten (externes Modul dh WebSocket)

Question

Ich benutze React und Redux, webSocket, um mit einigen serverseitigen Ereignissen umzugehen.

Ich bin in der Lage, Aktionen von der Komponente zu senden, die dem Dispatcher über die Funktion mapDispatchToProps() eine Funktion zuweist.

Aber was ist mit der Abfeuerung außerhalb der Komponenten? Zum Beispiel bei der empfangenen WebSocket-Veranstaltung.

Aufruf store.dispatch aus einem anderen Skript wird ein Referenz Fehler zurück (Versand nicht definiert ist), auch wenn der Laden richtig

importiert

Gibt es eine Möglichkeit, dies zu tun?

Hier ist meine App-Store-Konfigurationsfunktion:

import { createStore, combineReducers, applyMiddleware, compose } from 'Redux' 
import thunk from '../../node_modules/redux-thunk/src/index' 
import rootReducer from '../reducers/index' 


const configureStore = (initialState) => { 
    return createStore(
    rootReducer, 
    initialState, 
    compose(
     applyMiddleware(thunk), 
     window.devToolsExtension ? window.devToolsExtension() : f => f 
    ) 
) 
} 

export default configureStore 

hier App Einstiegspunkt, wo instanziiert Shop:

import React, { Component } from 'React' 
import { render } from 'ReactDOM' 
import { Provider } from 'ReactRedux' 
import { Router, hashHistory } from 'ReactRouter' //browserHistory 

import actions from './actions/actions' 
import configureStore from './store/configureStore' 
import routes from './routes' 


const store = configureStore() 
console.log('store log', store) 
window.storeDebug = store.getState() // FIXME: disable in production 



render(
    <Provider store={store}> 
    <Router history={hashHistory} routes={routes} /> 
    </Provider>, 
    document.getElementById('container') 
) 

Answer 1

Wie über eine eigene Middleware?

if (!window.location) { 
    // App is running in simulator 
    window.navigator.userAgent = 'react-native'; 
} 

// note keep the following after the window if conditions 
// https://github.com/facebook/react-native/issues/4393 
const socketIO = require('socket.io-client/socket.io'); 

const WebSocketHandler = (store) => (next) => (action) => { 

    const socket = socketIO(CHAT_SERVER_ADDRESS, { 
     transports: ['websocket'] 
    }); 

    socket.on('YOUR_EVENT', (data) => store.dispatch(ACTION_CREATOR(data))); 
} 

und Sie hängen Sie einfach die benutzerdefinierte Middleware in configureStore