Reactjs 反应Redux-加载状态变慢-如何解决它

我正试图为我的Redux创建一个加载状态，但它看起来更新起来“很慢”

第一个操作fetchDB=>setLoading:true=>once-over-setLoading:false

第二个操作fetchCat=>没有时间触发崩溃的操作

非常简单：

设置加载操作：

export const setLoading = () => {
  return async (dispatch) => {
    await dispatch({ type: SET_LOADING }); // no payload by default goes to true
  };
};

设置加载减速器：

import {
  FETCH_DB,
  SET_LOADING,
} from "../types"

const initalState = {
  db: [],
  loading: false,
}

export default (state = initalState, action) => {
    switch (action.type) {
      
    // this like the other cases sets loading to FALSE
    case FETCH_DB:
      return {
        ...state,
        db: action.payload,
        current: null,
        loading: false,
      }

    case FETCH_CAT_FOOD:
      
      return {
        ...state,
        food: action.payload,
        loading: false,
      }
    case FETCH_CAT_DESIGN:
      return {
        ...state,
        design: action.payload,
        loading: false,
      }

    case SET_LOADING:
      return {
        ...state,
        loading: true,
      }

    default:
      return state
  }
}

然后，我使用的造成问题的操作：

    export const fetchCat =  kindof => {
    
      return async dispatch => {

      dispatch(setLoading()) // looks like that it doesn't get fired

   const response = await axios
          .get(`http://localhost:5000/api/categories/${kindof}`)
          .then(results => results.data)
    
        try {
          await dispatch({ type: `FETCH_CAT_${kindof}`, payload: response })
        } catch (error) {
          console.log("await error", error)
        }
      }
    }

然后是产生问题的文件（自定义组件）。 它会导致

类别崩溃。地图
未定义。
它没有找到加载：true，因此加载程序不会停止

import React, { useState, useEffect, Fragment } from "react"

import { Spinner } from "react-bootstrap"

import { connect, useDispatch, useSelector } from "react-redux"

import CatItem from "./CatItem" // custom component

import { fetchCat, setLoading } from "../../../store/actions/appActions"

const MapCat = ({ kindof, loading, categories }) => {
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(fetchCat(kindof)) // gives the category I want to fetch
    // eslint-disable-next-line
  }, [categories])


  if (!loading) {
    return (
      <Spinner animation="border" role="status">
        <span className="sr-only">Loading...</span>
      </Spinner>
    )
  } else {
    return (
      <Fragment>
        <div>
          {categories.map(item => (
            <CatItem item={item} />
          ))}
        </div>
      </Fragment>
    )
  }
}

const mapStateToProps = (state, kindof) =>
  ({
    loading: state.appDb.loading,
    categories: state.appDb[kindof],
  })

export default connect(mapStateToProps, { fetchCat, setLoading })(MapCat)

import React，{useState，useffect，Fragment}来自“React”
从“react bootstrap”导入{Spinner}
从“react-redux”导入{connect，useDispatch，useSelector}
从“/CatItem”//custom组件导入CatItem
从“../../../store/actions/appActions”导入{fetchCat，setLoading}
常量映射猫=（{kindof，loading，categories}）=>{
const dispatch=usedpatch（）
useffect（（）=>{
dispatch（fetchCat（kindof））//提供我想要获取的类别
//eslint禁用下一行
}，[类别]）
如果（！加载）{
返回(
加载。。。
)
}否则{
返回(
{categories.map（项=>(
))}
)
}
}
常量mapStateToProps=（状态，种类）=>
({
加载：state.appDb.loading，
类别：state.appDb[kindof]，
})
导出默认连接（MapStateTops，{fetchCat，setLoading}）（MapCat）

我认为它应该是这样工作的：

加载：false（默认情况下）=>true=>time to fetch=>false

但看起来不像是在工作。你知道吗？
你打电话给dispatch的方式有点不同。让我把它们列出来

    dispatch(fetchCat(kindof)) // gives the category I want to fetch

您可以看到，
await
或not基本上是使用
async
操作的方式。然而，dispatch需要
类型
和
有效负载
才能运行，这意味着您必须确保发送给dispatch的对象是正确的。当然，
Redux
确实通过插件接受自定义格式，因此，如果您将其作为
async
的输入，减速机可能也能理解它

请先仔细检查每个分派，例如，编写一个只分派一种类型的操作的函数。只有在每次通话都有效后，才可以将它们组合成一个捆绑通话

首先，
setLoading
需要返回一个带有
类型和有效负载的普通对象

export const setLoading=（）=>（{type:SET_LOADING}）；

在
fetchCat
中，不需要
then
。此外，不需要异步等待分派
export const fetchCat=（kindof）=>{
返回（发送）=>{
分派（setLoading（））；//results.data）；//为每种不同类型的回迁创建一个单独的
加载
状态。利用它们并将它们移动到它们自己的子还原器。我考虑过这一点，但后来它太复杂，灵活性不高，所以我正在尝试找到解决方案。谢谢，但我认为问题不同，至少现在是这样。我的意思是看起来不一样更新
categories
并对其进行映射这很好，只要你知道哪个调度不起作用，这将帮助你解决最后的难题：）非常感谢！你向我澄清了很多想法！现在我认为问题是
categories
没有得到更新，因为如果我记录，它总是未定义的，尽管显示了开发工具如果我记录
categories
我总是没有定义，他们会抓到我所有的东西。
    await dispatch({ type: `FETCH_CAT_${kindof}`, payload: response })