Question

我有一个redux应用程序，可以使用axios对各种apis进行多次调用。我现在想添加一个加载栏，但我不想添加redux-thunk的复杂性。但是，在搜索谷歌时，它似乎是最佳方式，因此您可以使用类型和有效负载调用分派。有没有更简单的方法用扁平物体做这个？

Answer 1

执行此操作的最佳方法是使用redux-thunk或sagas，但如果您不想增加复杂性，那么另一种解决方法是维护组件的状态isLoading。因此，您可以在react的生命周期钩子中切换此状态并呈现数据。以下是您可能正在寻找的解决方法的示例。

class Example extends React.Component {
    constructor(props, context) 
        this.state = { isLoading: true }
    }


    componentWillMount() {
        //After doing api stuffs or fetching data toggle state.
        this.setState({ isLoading: false });
    }

    render() {
       this.state.isLoading ? <LoadingScreen/> : <Page/>
    }
}

此处<LoadingScreen/>包含加载程序的代码，而Page组件具有示例组件的代码。

使用redux-promise调用Axios成功/错误

1 个答案: