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!
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
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 –
Ich habe meine Antwort aktualisiert, um meine Funktion 'mapDispatchToProps' einzuschließen, sieht es richtig aus? – Mike