रेडक्स राउटर - "डिस्पैच परिभाषित नहीं किया गया है"

Question

मेरे पास एक साधारण घटक है जो उपयोगकर्ता द्वारा कोई पृष्ठ लोड करते समय एक क्रिया को कॉल करता है, और उस क्रिया के अंदर, मैं loggedIn स्थिति सेट करने के लिए एक और क्रिया भेजने की कोशिश कर रहा हूं करने के लिए स्टोर सही या गलत:

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 

मैं प्रवेश जानकारी प्राप्त कर सकते हैं जब guestLoginRequest कार्रवाई कहा जाता है, लेकिन जब मैं इसके अंदर एक और कार्रवाई प्रेषण करने के लिए प्रयास करते हैं, कुछ नहीं होता:

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"); 
     }; 
     } 
    }); 
    } 

मैं Uncaught ReferenceError: dispatch is not defined की त्रुटि जब मैंहटा देता हूंकथन। मेरी दुकान में मैं redux-thunk उपयोग कर रहा हूँ, इसलिए मैं कार्यों के अंदर प्रेषण कर सकते हैं:

// 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) 
} 

मैं अपने app.js में रंगमंच की सामग्री के लिए प्रेषण मानचित्रण हूँ के साथ-साथ:

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

export default connect(mapStateToProps, mapDispatchToProps)(App) 

शायद ज़रुरत पड़े यह उपयोगी हो सकता है, यहाँ मेरी client.js और कम करने फ़ाइलें है:

// 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 

कोई भी विचार क्यों मेरे प्रेषण समारोह काम नहीं कर रहा? मैं उलझन में हूं क्योंकि मैंने अपने स्टोर के साथ रेडक्स-थंक स्थापित किया है, और जब मैं return dispatch => { } पर कॉल करता हूं तो मैं दस्तावेज़ों के समान कोड का उपयोग कर रहा हूं। क्या मुझे कुछ याद आ रही है? किसी भी सलाह के लिए अग्रिम धन्यवाद!

Answer 1

आपको थंक मिडलवेयर का उपयोग करने के लिए फ़ंक्शन वापस करने के लिए अपनी कार्रवाई की आवश्यकता है, फिर रेडक्स इसमें प्रेषक को इंजेक्ट करेगा। आपने कार्यान्वयन विस्तार के साथ अपने प्रेषक आमंत्रण को मिश्रित किया। निम्नलिखित स्निपेट दोनों दोषों को हल करता है।

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"); 
     } 
    }); 
    } 
} 

इसके अलावा, आप Login वर्ग पर सही ढंग से अपनी कार्रवाई प्रेषण करने के लिए की जरूरत है।

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

आपकी कार्रवाई मंगलाचरण हमेशा dispatch लागू किया जाता है। प्रवाह कुछ इस तरह होना चाहिए:

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