Redux 路由器 - "Dispatch is not defined"

Question

我有一个简单的组件，它在用户加载页面时调用一个操作，在该操作中，我试图调度另一个操作来将存储的loggedIn状态设置为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

你知道为什么我的调度功能不起作用吗？我很困惑，因为我确实用我的商店设置了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

首先，您需要导入

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

然后称之为

• const dispatch = useDispatch();

现在您可以使用了。

Answer 3

确保useDispatch导入

import { useDispatch } from "react-redux";