无法在 class 组件中调度操作

Question

// action
export const getEvents = () => async (dispatch) => {
  try {
    dispatch({ type: GET_EVENTS_REQUEST })
    const data = await axios.get('http://localhost:5000/api/schedule').then((response) => response.data)
    dispatch({ type: GET_EVENTS_SUCCESS, payload: data })
  } catch (error) {
    dispatch({
      type: GET_EVENTS_FAIL,
      payload:
      error.response && error.response.data.message
        ? error.response.data.message
        : error.message,
    })
  }
}

// reducer
export const getEventsReducer = (state = { event: [] }, action) => {
  switch (action.type) {
  case GET_EVENTS_REQUEST:
    return { loading: true }
  case GET_EVENTS_SUCCESS:
    return { loading: false, event: action.payload }
  case GET_EVENTS_FAIL:
    return { loading: false, error: action.payload }
  default:
    return state
  }
}

// and this is how I'm trying to call my action:
import { getEvents } from '../../redux/actions/calendarActions'

class Calendar extends React.PureComponent {
    componentDidMount() {
        const { dispatch } = this.props
        console.log(dispatch(getEvents()))
    }
}
export default connect()(Calendar)
// component is much bigger, I only added relevant parts

直到我的减速器，如果我 console.log 我的数据，它是正确的，以及在我的 redux 开发工具选项卡中：一个包含几个条目的数组。但是当 console.log 在我的日历组件中运行时，它 returns 一个承诺，结果未定义：

Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined

我做错了什么？

Answer 1

通常情况下，您希望能够访问组件中 Redux 的调度或存储。您已经在组件中具有调度功能，但是如果您需要访问其中的 Redux 状态：

首先你需要定义这样的函数，这使得 redux 存储在组件中可用。

    const mapStateToProps = (state) => ({
  state: state // a "state" prop is available in the component which points to redux state, 
})

或者如果你只需要 Redux 状态的某些属性，你可以自定义它：

        const mapStateToProps = (state) => ({
  state: state.event // 
})

并像这样更改连接函数：

connect(mapStateToProps)(Calendar)

无法在 class 组件中调度操作

Can't dispatch action in class component

dispatch

reactjs

react-redux