Redux-Router - "Versand ist nicht definiert"
Ich habe eine einfache Komponente, die fordert, eine Aktion auszuführen, wenn ein Benutzer lädt eine Seite, und im inneren dieser Aktion, ich versuche, die Versand-eine weitere Aktion der loggedIn
Staat, der den laden auf true oder false:
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
Bekomme ich die login-Informationen bei der guestLoginRequest
Aktion aufgerufen, aber wenn ich versuche, Versand weitere Aktion, in der es, 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");
};
}
});
}
Bekomme ich eine Fehlermeldung von Uncaught ReferenceError: dispatch is not defined
wenn ich entfernen Sie die return dispatch => { }
- Anweisung. In meinem Shop ich bin mit redux-thunk, so kann ich bei einem Versand innerhalb von Aktionen:
//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 bin Kartierung der Versand zu Requisiten in meinem app.js sowie:
function mapStateToProps(state) {
return state
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
Nur, falls es hilfreich sein könnte, hier ist meine client.js und reducer-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 habe ich eingerichtet redux-thunk mit meinem Shop, und ich bin mithilfe von code ähnlich wie die docs, wenn ich rufe return dispatch => { }
. Gibt es etwas, was ich bin fehlt? Vielen Dank im Voraus für jeden Rat!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie Ihre Aktion, um wieder eine Funktion zu nutzen, die thunk-middleware, dann redux injizieren der dispatcher in es. Sie vermischt Ihre dispatcher-Aufruf mit der Implementierung detail. Das folgende snippet behebt beide Mängel.
Darüber hinaus müssen Sie bis zum Versand Ihre Aktion richtig auf die
Login
Klasse.Ihre Aktion Aufruf erfolgt immer über den Aufruf
dispatch
. Die Strömung sollte so etwas wie dieses:dispatch
(über mapDispatchToProps) oder der Filiale dispatcher direkt (store.Versand). Hier ist ein Implementierung Beispiel: Component - github.com/mattlo/consultant-app/blob/master/src/client/... Store-export - github.com/mattlo/consultant-app/blob/master/src/client/data/...mapDispatchToProps
- Funktion, sieht es Recht?