reactind nativexのアクションからactivityindicatorを表示および非表示にするにはどうすればよいですか？

Question

アプリケーションからapi呼び出しを行うたびにprogress/activityindicatorを表示したいが、これに対して正しい解決策を見つけることができない。私はactivityindicatorを表示することができますが、私はそれを隠すことはできません。ここに私のコードです：

<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> 

方法：

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}) 

、ここでは私のシーン構造でありますアクションインジケータをアクションから隠すことはできますか？

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と派遣SET_LOADING。

しかし、負荷を処理するための単一の状態では、大きなアプリケーションでは不十分です。たとえば、APIへの並列クエリを処理し、すべての単一クエリに対してローダーを表示する必要があります。そうすれば、他の減速機でこのようなフィールドが必要になります。

ところで、あなたは間違いなく非同期フローで問題を解決します。私はredux-thunk,redux-sagaとredux-observableのようなミドルウェアをお勧めします。

私のお気に入りの1つはレフィックスサガです。これは、アプリケーションでの非同期フローやその他の副作用を制御する非常に強力な方法です。

私はそれが役に立ちそうです。