2016-04-06 4 views
6

Ich habe eine einfache Komponente, die eine Aktion aufruft, wenn ein Benutzer eine Seite lädt, und innerhalb dieser Aktion versuche ich eine andere Aktion zu senden, um den loggedIn Zustand des zu setzen speichern, um wahr oder falsch:Redux Router - "Versand ist nicht definiert"

import React, { Component } from 'react' 
import { Link, browserHistory } from 'react-router' 
import $ from 'jquery' 

class Login extends Component { 

    constructor(props) { 
    super(props) 
    } 
    componentDidMount() { 
    this.props.actions.guestLoginRequest() 
    } 
    render() { 
    return (
     <div> 
     <div classNameName="container"> 
      <div className="row"> 
      We are signing you in as a guest 
      </div> 
     </div> 
     </div> 
    ) 
    } 
} 

export default Login 

ich kann die Anmeldeinformationen erhalten, wenn die guestLoginRequest Aktion aufgerufen wird, aber wenn ich versuche, eine andere Aktion in der es zu schicken, passiert nichts:

guestLoginRequest: function(){ 
    var ref = new Firebase("https://penguinradio.firebaseio.com"); 
    ref.authAnonymously(function(error, authData) { 
     if (error) { 
     console.log("Login Failed!", error); 
     } else { 
     console.log("Authenticated successfully with payload:", authData); 
     return dispatch => { 
      dispatch(actions.setLoginStatus(true, authData)) 
      console.log("dispatched"); 
     }; 
     } 
    }); 
    } 

ich ein Fehler von Uncaught ReferenceError: dispatch is not defined, wenn ich dieentferneAussage. In meinem Speicher Ich bin mit redux-Thunk, so kann ich innerhalb von Aktionen Versand:

// Store.js 
import { applyMiddleware, compose, createStore } from 'redux' 
import rootReducer from './reducers' 
import logger from 'redux-logger' 
import thunk from 'redux-thunk' 

let finalCreateStore = compose(
    applyMiddleware(thunk, logger()) 
)(createStore) 


export default function configureStore(initialState = { loggedIn: false }) { 
    return finalCreateStore(rootReducer, initialState) 
} 

Ich Abbilden des Versands an Requisiten in meinem app.js auch:

function mapStateToProps(state) { 
    return state 
} 
function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators(actions, dispatch) 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(App) 

Für den Fall, es könnte hilfreich sein, hier ist meine Client.js und Minderer Dateien:

// client.js 
import React from 'react' 
import { render } from 'react-dom' 
import App from '../components/App' 
import configureStore from '../redux/store' 
import { Provider } from 'react-redux' 


let initialState = { 
    loggedIn: false 
} 

let store = configureStore(initialState) 

render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById('app') 
) 
// Reducer.js 
import { combineReducers } from 'redux' 

let LoginStatusReducer = function reducer(loggedIn = false, action) { 
    switch (action.type) { 
    case 'UPDATE_LOGIN_STATUS': 
     return loggedIn = action.boolean 
    default: 
     return loggedIn 
    } 
} 
export default LoginStatusReducer 

const rootReducer = combineReducers({ 
    loggedIn: LoginStatusReducer 
}) 

export default rootReducer 

Irgendwelche Ideen, warum meine Dispatch-Funktion nicht funktioniert? Ich bin verwirrt, da ich Redux-Thunk mit meinem Geschäft eingerichtet habe, und ich verwende Code ähnlich wie die Dokumente, wenn ich return dispatch => { } anrufen. Gibt es etwas, das mir fehlt? Vielen Dank im Voraus für jeden Hinweis!

Antwort

5

Sie benötigen Ihre Aktion, um eine Funktion zur Verwendung der Thunk-Middleware zurückzugeben, dann wird redux den Dispatcher in sie einfügen. Sie haben Ihren Dispatcheraufruf mit dem Implementierungsdetail gemischt. Das folgende Snippet behebt beide Fehler.

guestLoginRequest: function(){ 
    return function (dispatch) { 
    var ref = new Firebase("https://penguinradio.firebaseio.com"); 
    ref.authAnonymously(function(error, authData) { 
     if (error) { 
     console.log("Login Failed!", error); 
     } else { 
     console.log("Authenticated successfully with payload:", authData); 
     dispatch(actions.setLoginStatus(true, authData)) 
     console.log("dispatched"); 
     } 
    }); 
    } 
} 

Darüber hinaus benötigen Sie eine Aktion korrekt auf der Login Klasse versenden.

dispatch(this.props.actions.guestLoginRequest()) 

Ihre Aktion Aufruf wird immer durch dispatch Aufruf erfolgt. Die Strömung sollte wie folgt sein:

React component --> dispatch ---> API call (thunk middleware) --> dispatch ---> reducer 
+0

ich meine Aktion mit dem ersetzt haben Sie oben geschrieben, und die Dispatch-Anruf auf Login.js aktualisiert, aber ich bin immer ein auf die „Versand ist nicht definiert“ Login.js-Datei. Muss ich diese Funktion an die Login-Komponente weitergeben? Auch sollte ich Rückruffunktion (Versand) anstelle von Rückgabefunktion (Versand * er *) aufrufen? – Mike

+0

Sie müssen einen Wrapper um den "Versand" des Geschäfts (via mapDispatchToProps) verfügbar machen oder den Dispatcher des Geschäfts direkt (store.dispatch) abrufen. Hier ist ein Implementierungsbeispiel: Komponente - https://github.com/mattlo/consultant-app/blob/master/src/client/components/Chat/Chat.js#L66 Store-Export - https: // github. com/mattlo/berater-app/blob/master/src/client/data/index.js # L11 –

+0

Ich habe meine Antwort aktualisiert, um meine Funktion 'mapDispatchToProps' einzuschließen, sieht es richtig aus? – Mike

Verwandte Themen