Redux Router - "Dispatch is not defined"

Question

Tôi có một thành phần đơn giản gọi hành động khi người dùng tải trang và bên trong hành động đó, tôi đang cố gắng gửi một hành động khác để đặt trạng thái loggedIn của lưu trữ là đúng hoặc sai:

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 

tôi có thể nhận được thông tin đăng nhập khi hành động guestLoginRequest được gọi, nhưng khi tôi cố gắng cử động khác bên trong của nó, không có gì xảy ra:

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

tôi nhận được lỗi của Uncaught ReferenceError: dispatch is not defined khi tôi xóa return dispatch => { }. Trong cửa hàng của tôi, tôi đang sử dụng Redux-thunk, vì vậy tôi có thể gửi bên trong của hành động:

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

Tôi đang lập bản đồ công văn tới đạo cụ trong app.js của tôi cũng như:

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

export default connect(mapStateToProps, mapDispatchToProps)(App) 

Chỉ trong trường hợp có thể hữu ích, dưới đây là các tệp client.js và reducer của tôi:

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

Bất kỳ ý tưởng nào về chức năng gửi của tôi không hoạt động? Tôi đang bối rối vì tôi đã thiết lập redux-thunk với cửa hàng của tôi, và tôi đang sử dụng mã tương tự như các tài liệu khi tôi gọi return dispatch => { }. Có cái gì tôi đang mất tích? Cảm ơn bạn trước vì lời khuyên nào!

Answer 1

Bạn cần hành động của mình để trả về một hàm để sử dụng phần mềm trung gian, sau đó redux sẽ đưa bộ điều phối vào đó. Bạn đã trộn lẫn yêu cầu điều phối của mình với chi tiết triển khai. Đoạn mã sau khắc phục cả hai lỗi.

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

Ngoài ra, bạn cần gửi hành động của mình chính xác trên lớp Login.

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

Gọi hành động của bạn luôn được thực hiện bằng cách gọi dispatch. Lưu lượng phải giống như sau:

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