如何在 React Native Redux 的动作中显示和隐藏 ActivityIndi​​cator？

Question

我想在我的应用程序发出 api 调用时显示 progress/activityindicator，但我找不到正确的解决方案。我可以显示 activity 指示器，但无法将其隐藏。这是我的代码：

StatusModal.js

constructor(props) {
 super(props)
 // set state with passed in props
 this.state = {
   message: props.error,
   hide: props.hide,
   animating: props.animating
 }
}

render() {  
 if(this.state.animating){
   return(
     <ActivityIndicator
       animating={true}
       size="small"
      />
   )
 }else{
   return(
     <View>
     </View>
   )
 }
}

下面是我如何更改动画状态

//show activity
Actions.statusModal({animating: true})

//hide activity
Actions.statusModal({animating: false})

这是我的场景结构：

<Scene key="modal" component={Modal} >
 <Scene key="root">
 <Scene key='login' component={Login} title='Login Page' hideNavBar={true} />
 </Scene>
 <Scene key="statusModal" component={StatusModal} />
</Scene>

如何隐藏操作中的 activity 指标？

Answer 1

应用程序处理加载是很常见的事情。 处理它的最简单方法是为此创建一个单独的减速器。 例如：

    function appStateReducer(state = { loading: false }, action) {
        switch(action.type) {
          case "SET_LOADING":
            return { loading: action.payload };
          default:
            return { loading: false };
        }
    }

    ...
    const rootReducer = combineReducer(
       ...otherReducers,
       app: appStateReducer
    );
    ...

稍后您可以在您的组件中使用它。

...

    const mapStateToProps = (state) => ({
        loading: state.app.loading,
    });

    @connect(mapStateToProps)
    class MyScene extends Component {
    ...

    render() {
       const { loading } = this.props;
       if (loading) {
       return (
           
         );
        }
        return ;
    }

在查询开始时使用 true 调度操作 SET_LOADING，并在末尾或出现错误时使用 false 调度 SET_LOADING。

但是处理加载的单一状态对于大型应用程序来说是不够的。例如：您需要处理对 API 的并行查询，并为每个查询显示加载器。那么你将需要在其他减速器中使用这些字段。

顺便说一句，您肯定会遇到异步流的问题。我会推荐这样的中间件 redux-thunk, redux-saga and redux-observable.

我最喜欢的是 redux-saga。这是控制异步流和应用程序中所有其他副作用的非常强大的方法。

希望对您有所帮助。