为什么我的 dispatch/console.log 在我调用操作时没有触发？

Question

我正在为 Flatiron 做我的期末项目，在我的前端工作时遇到了一个错误。我尝试了很多东西，但总是回到这个问题。我的调度中的回调函数没有触发。因此，虽然我可能有兴趣知道我的代码是否应该 refactored/fixed 个错误，但最大的问题是我不能运行通过操作进行调度。这是我的通用容器：

import { useEffect } from "react"
import { connect } from "react-redux"

import * as actions from "../../actions/index"
import Component from "./Component"


const Container = (props) => {
  useEffect(() => {
    actions.menuItemsFetchRandom(8)
  }, [])
  const menuItemComponents = props.menuItems.menuItems.map((menuItem) => {
    return (
      <Component key={menuItem.key} menuItem={menuItem} />
    )
  })
  return (
    <div className="container">
      {
        props.menuItems.fetching
        ? "loading..."
        : (
          props.menuItems.error === ""
          ? menuItemComponents
          : props.menuItems.error
        )
      }
    </div>
  )
}

const mapStateToProps = (state) => {
  return {
    menuItems: state.menuItems
  }
}

export default connect(mapStateToProps)(Container)

而我的 actions.menuItemsFetchRandom() 来自 /actions/menuItems.js:

import * as common from "./common"
import * as reducers from "../reducers/index"

const MENU_ITEMS_URL = common.API_URL + "menu_items/"

export const menuItemsFetchMany = (options) => {
  return (dispatch) => {
    dispatch({
      type: reducers.MENU_ITEMS_FETCH_REQUEST
    })
    fetch(MENU_ITEMS_URL + options).then((response) => {
      return response.json()
    }).then((menuItems) => {
      dispatch({
        type: reducers.MENU_ITEMS_FETCH_SUCCESS,
        payload: menuItems
      })
    }).catch((error) => {
      dispatch({
        type: reducers.MENU_ITEMS_FETCH_ERROR,
        payload: error
      })
    })
  }
}

export const menuItemsFetchRandom = (numberOfItems) => {
  console.log("hi")
  return (dispatch) => {
    console.log("Hello")
    dispatch({
      type: reducers.MENU_ITEMS_FETCH_REQUEST
    })
    fetch(MENU_ITEMS_URL).then((response) => {
      return response.json()
    }).then((menuItems) => {
      const length = menuItems.length
      if (numberOfItems > length) {
        numberOfItems = length
      }
      dispatch({
        type: reducers.MENU_ITEMS_FETCH_SUCCESS,
        payload: (() => {
          const result = []
          while (result.length !== length) {
            const choice = menuItems[common.getRandomInt(length)]
            if (result.includes(choice)) {
              continue
            }
            result.push(choice)
          }
        })()
      })
    }).catch((error) => {
      dispatch({
        type: reducers.MENU_ITEMS_FETCH_ERROR,
        payload: error
      })
    })
  }
}

我的 /reducers/menuItems.js 看起来像这样：

export const MENU_ITEMS_FETCH_REQUEST = "MENU_ITEMS_FETCH_REQUEST"
export const MENU_ITEMS_FETCH_SUCCESS = "MENU_ITEMS_FETCH_SUCCESS"
export const MENU_ITEMS_FETCH_ERROR = "MENU_ITEMS_FETCH_ERROR"

const initialState = {
  menuItems: [],
  error: "",
  fetching: false
}

const menuItems = (state=initialState, action) => {
  switch (action.type) {
    case MENU_ITEMS_FETCH_REQUEST: {
      return {
        ...state,
        error: "",
        fetching: true
      }
    }
    case MENU_ITEMS_FETCH_SUCCESS: {
      return {
        ...state,
        menuItems: action.payload,
        error: "",
        fetching: false
      }
    }
    case MENU_ITEMS_FETCH_ERROR: {
      return {
        ...state,
        error: action.payload,
        fetching: false
      }
    }
    default: {
      return state
    }
  }
}

export default menuItems

但这似乎并不重要，因为 menuItemsFetchRandom() 中回调函数中的 console.log 不会触发。我得到 console.log("hi")，但没有 console.log("Hello")。这对我来说告诉我它要么是我的代码有问题，要么是 redux-thunk 有问题。

Answer 1

您需要实际调度该操作，而不仅仅是调用操作创建者。

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(actions.menuItemsFetchRandom(8))
  }, [])

PS：同样，在函数组件中不需要使用connect。使用 useSelector 和 useDispatch 更容易，官方推荐。此外，您正在编写一种非常过时的 redux 风格，这使您可以编写现代 redux 所需的大量代码。您可能正在学习非常过时的教程。请在 https://redux.js.org/tutorials/index

查看官方教程

为什么我的 dispatch/console.log 在我调用操作时没有触发？

Why is my dispatch/console.log not firing when I call the action?

dispatch

thunk

reactjs

redux

redux-thunk