Redux Routeur - “l'Expédition n'est pas défini”
J'ai un composant simple qui appelle une action lorsqu'un utilisateur charge une page, et à l'intérieur de cette action, je suis en train de dépêcher une autre action pour définir la loggedIn
état du magasin à vrai ou faux:
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
Que je puisse obtenir les informations de connexion lors de la guestLoginRequest
action est appelée, mais lorsque j'essaie d'envoyer un autre action à l'intérieur d'elle, rien ne se passe:
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");
};
}
});
}
J'obtiens une erreur de Uncaught ReferenceError: dispatch is not defined
quand j'enlève le return dispatch => { }
déclaration. Dans mon magasin, je suis en utilisant redux-thunk, afin que je puisse l'expédition à l'intérieur d'actions:
//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)
}
Je suis une cartographie de la répartition à la des accessoires dans mon app.js ainsi:
function mapStateToProps(state) {
return state
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
Juste au cas où il pourrait être utile, voici mon client.js et réducteur de fichiers:
//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
Des idées pourquoi ma fonction d'envoi ne fonctionne pas? Je suis confondu, car je n'ai configurer redux-thunk avec mon magasin, et je suis en utilisant un code similaire pour les docs quand je l'appelle return dispatch => { }
. Est-il quelque chose que je suis absent? Je vous remercie à l'avance pour tout conseil!
OriginalL'auteur Mike | 2016-04-06
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin de votre action de retour d'une fonction à utiliser le thunk middleware, puis redux permettra d'injecter le répartiteur. Vous mixte répartiteur invocation avec le détail de l'implémentation. L'extrait de code suivant résout à la fois les défauts.
En outre, vous avez besoin d'expédier votre action correctement sur le
Login
classe.Votre action invocation est toujours fait en invoquant
dispatch
. Le débit doit être quelque chose comme ceci:Vous aurez besoin d'exposer un wrapper autour de la boutique du
dispatch
(via mapDispatchToProps) ou obtenir le magasin du répartiteur directement (magasin.l'expédition). Voici un exemple de mise en œuvre: Composant - github.com/mattlo/consultant-app/blob/master/src/client/... Magasin à l'exportation - github.com/mattlo/consultant-app/blob/master/src/client/data/...J'ai mis à jour ma réponse à ma
mapDispatchToProps
fonction, est-il droit?OriginalL'auteur Matt Lo