Redux 路由器 - “未定義調度”

Question

我有一個簡單的組件，當用戶加載頁面時調用一個操作，在該操作中，我試圖分派另一個操作以將商店的loggedIn state 設置為 true 或 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

我可以在調用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");
        };
      }
    });
  }

當我刪除return dispatch => { }語句時，出現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 和 reducer 文件：

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

知道為什么我的調度 function 不起作用嗎？ 我很困惑，因為我確實在我的商店中設置了 redux-thunk，並且我在調用return dispatch => { }時使用了類似於文檔的代碼。 有什么我想念的嗎？ 預先感謝您的任何建議！

Answer 1

你需要你的動作來返回一個函數來利用thunk中間件，然后redux會將調度程序注入其中。 您將調度程序調用與實現細節混合在一起。 以下代碼段修復了這兩個缺陷。

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

Answer 2

確保已導入useDispatch

import { useDispatch } from "react-redux";

Answer 3

首先，你需要導入

• import { useDispatch } from "react-redux";

然后調用它。

• const dispatch = useDispatch();

現在您可以使用了。