首先运行 Redux

Question

我正在使用 redux 来管理我的应用的全局状态。

我有全局状态“shop”并通过“onFilterShops”改变它的值。

const mapStateToProps = ({ shops }) => {
    return {
        shops: shops.shops
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onFilterShops: shop => dispatch(filterShops(shop))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MenuShop)

更改此状态会在我的应用中运行一个过滤器并需要几秒钟，因此我想在此过程中显示一个 Spinner。

const toggleMenu = index => {
        setIsLoading(true) //Local state, Spinner visible - Line 1
        props.onFilterShops(index) // Line 2
        setIsLoading(false) //Local state, Spinner invisible - Line 3
    }

问题是执行第一行2，过滤器完成，在过滤器结束时，执行第1行和第3行，Spinner没有机会出现。

如果我在中间放一个承诺，它会起作用，但它很丑。

const wait = ms => new Promise(resolve => setTimeout(resolve, ms))
const toggleMenu = async (index) => {
        setIsLoading(true)
        await wait(1)
        props.onFilterShops(index)
        setIsLoading(false)
    }

为什么？

Answer 1

您可以将调度操作视为应用程序中的“触发事件”。

您在第 2 行执行的函数只会调度操作，因此它不会等待代码运行。

由于这个原因，第 3 行被立即触发，看起来你的加载微调器从未出现过。

有几种方法可以实现您想要的功能，例如通过redux thunk，假设代码是异步的。

我认为学习 redux 基础知识是一个很好的起点。

Answer 2

问题

在第 1 行中，您计划更新状态，但之后您立即阻塞了整个线程，因此 redux 没有机会更新 ui，直到繁重的负载结束。当负载结束时，您已经将状态设置回其原始状态。

解决方案

根据这个线程，你必须调度 setIsLoading 函数：React Loading Spinner + Redux?

也看看promise：https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise

简单用法：

const [isLoading, setIsLoading] = useState(false)
let computationResult = "Hello World!"

function someLoadingFunction(){
   dispatch(setIsLoading(true))
   new Promise<string>((resolve, reject) => {
      //Do your filtering
      return "this result took really long and baked your cpu"
   }.then((result) => {
      computationResult = result
      dispatch(setIsLoading(false))
   }
   
}

someLoadingFunction()
console.log(computationResult)

希望你能理解；）

如果有帮助：将我的答案标记为已回答。目前我想获得更多的声誉;）

如果还有什么问题：欢迎评论