reactjs - Add a load indicator based on the Redux state - react native

Question

How can I add a charging indicator based on the Redux status?

I need to place a loading screen while sending the data.

charging indicator component

import React from 'react';
import { StyleSheet } from 'react-native';
import AnimatedLoader from "react-native-animated-loader";

import {connect} from 'react-redux'

class Loader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {visible: false };
  }

  // componentDidMount() {
  //   setInterval(() => {
  //     this.setState({
  //       visible: !this.state.visible
  //     });
  //   }, 2000);
  // }

  render() {
    const { visible } = this.props;

    if (!visible) return outVisible();

        return (
            <AnimatedLoader
            visible={visible}
            overlayColor="rgba(255,255,255,0.75)"
            source={require("./loader.json")}
            animationStyle={styles.lottie}
            speed={1}
          >
              <Text>Carregando...</Text>
            </AnimatedLoader>
            );
  }
}

const styles = StyleSheet.create({
  lottie: {
    width: 200,
    height: 200
  }
});

const mapStateToProps = (state) => ({visible: state.visible});

const mapDispatchToProps = dispatch => {
  return {outVisible: () => dispatch(setVisible({visible: false}))}
}

export default connect(mapStateToProps,mapDispatchToProps)(Loader)

Action

import { SET_VISIBLE } from './actionsTypes'

export const setVisible = visible => {
    return {
        type: SET_VISIBLE,
        payload: visible
    }
}

Reducer

import { SET_VISIBLE } from '../actions/actionsTypes'

const initialState = {
    visible: false
}

const reducer = (state = initialState, action) => {
    switch(action.type) {
      case SET_VISIBLE:
        return {
            ...state,
            visible: action.payload.visible
        };
      default:
        return state;
    }
}

export default reducer

Store Config

import {
  createStore,
  combineReducers,
  compose,
  applyMiddleware
} from 'redux'
import thunk from 'redux-thunk'

import postReducer from './reducers/post'
import userReducer from './reducers/user'
import messageReducer from './reducers/message'
import loadingReducer from './reducers/loading'

const reducers = combineReducers({
  user: userReducer,
  post: postReducer,
  message: messageReducer,
  visible: loadingReducer
})

const storeConfig = () => {
  return createStore(reducers, compose(applyMiddleware(thunk)))
}

export default storeConfig

actions types

export const USER_LOGGED_IN = 'USER_LOGGED_IN'
export const USER_LOGGED_OUT = 'USER_LOGGED_OUT'
export const SET_MESSAGE = 'SET_MESSAGE'
export const LOADING_USER = 'LOADING_USER'
export const USER_LOADED = 'USER_LOADED'
export const CREATING_POST = 'CREATING_POST'
export const POST_CREATED = 'POST_CREATED'
export const SET_POSTS = 'SET_POSTS'

export const SET_VISIBLE = 'SET_VISIBLE'

app.js

import React, { Component } from 'react'
import { Alert } from 'react-native'
import { connect } from 'react-redux'
import Routes from "./routes";
import { setMessage } from './store/actions/message'

class App extends Component {
    componentDidUpdate = () => {
        if(this.props.text && this.props.text.toString().trim())
        {
            Alert.alert(this.props.title || 'Mensagem',this.props.text.toString())
            this.props.clearMessage()
        }
    }

    render() {
        return (
            <Routes />
        )
    }
}

const mapStateToProps = ({ message}) => {
    return {
        title: message.title,
        text: message.text,
    }
}

const mapDispatchToProps = dispatch => {
    return {
        clearMessage: () => dispatch(setMessage({ title: '', text: '' }))
    }

}


export default connect(mapStateToProps, mapDispatchToProps)(App)

Right after the data is sent to the API, I need to return a load indicator to the user, until that data is stored.

question from:https://stackoverflow.com/questions/65942666/add-a-load-indicator-based-on-the-redux-state-react-native

Answer 1

Waitting for answers