Как показать и скрыть индикатор активности от действий в реагировать на родной редукс?

Question

Я хочу показывать индикатор прогресса / активности всякий раз, когда я делаю вызов API из моего приложения, но я не могу найти правильное решение для этого. Я могу показать индикатор активности, но не могу скрыть это от глаз. Вот мой код:

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>

Как скрыть индикатор активности от действий?

Answer 1

Это довольно распространенная вещь для приложений, чтобы справиться с загрузкой. Самый простой способ справиться с этим - создать для этого отдельный редуктор. Например:

    function appStateReducer (state = {loading: false}, action) {
        switch (action.type) {
          case "SET_LOADING":
            return {loading: action.payload};
          дефолт:
            return { loading: false };
        }
    }

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

Позже вы можете использовать его в своих компонентах.

...

    const mapStateToProps = (state) => ({
        загрузка: state.app.loading,
    });

    @connect(mapStateToProps)
    Класс MyScene расширяет Компонент {
    ...

    render() {
       const { loading } = this.props;
       if (loading) {
       вернуть ();
        }
        вернуть;
    }

Диспетчерское действие SET_LOADING в начале запроса с true и отправка SET_LOADING с ложью в конце или в случае ошибки.

Но одного большого состояния для обработки загрузки недостаточно для большого приложения. Например: вам нужно обрабатывать параллельные запросы к API и показывать загрузчик для каждого запроса. Тогда вам понадобятся такие поля в других редукторах.

Кстати, вы наверняка столкнетесь с проблемой асинхронного потока. Я бы порекомендовал такое промежуточное ПО, как redux-thunk, redux-saga и redux-observable.

Мой любимый - это Редукс-сага. Это очень мощный способ управления асинхронным потоком и всеми другими побочными эффектами в вашем приложении.

Я надеюсь, что это помогает.