Я использую избыточность в собственном приложении реагирования для извлечения и отображения данных, но это не обновляется при изменении данных из серверной части - PullRequest
Новая
       52

Я использую избыточность в собственном приложении реагирования для извлечения и отображения данных, но это не обновляется при изменении данных из серверной части

0 голосов
/ 18 февраля 2020

Я использую Redux в своем приложении React-Native. Я извлекаю данные из вызова API и в случае успеха отправляю их на ListItem. Я могу получать и отображать данные, но данные не обновляются автоматически, пока я не вернусь на страницу. Даже значения не сохраняются в приложении. Я вызываю метод из действий конструктора и метода componentDidMount. Можете ли вы проверить код и сказать мне, где я иду не так.

Вот действие. js

import { 
    FETCHING_PRODUCT_REQUEST, 
    FETCHING_PRODUCT_SUCCESS, 
    FETCHING_PRODUCT_FAILURE 
} from './types';

export const fetchingProductRequest = () => ({
    type : FETCHING_PRODUCT_REQUEST
});

export const fetchingProductSuccess = (json) => ({
    type : FETCHING_PRODUCT_SUCCESS,
    payload : json
});

export const fetchingProductFailure = (error) => ({
    type : FETCHING_PRODUCT_FAILURE,
    payload : error
});

export const fetchProduct = () => {
    return async dispatch => {
        dispatch(fetchingProductRequest());
        try {
            let response = await fetch("http://phplaravel-325095-1114213.cloudwaysapps.com/api/shop/shop");
            let json = await response.json();
            dispatch(fetchingProductSuccess(json));
        } catch(error) {
            dispatch(fetchingProductFailure(error));
        }
    }
}

Мой редуктор. js

import { 
    FETCHING_PRODUCT_REQUEST, 
    FETCHING_PRODUCT_SUCCESS, 
    FETCHING_PRODUCT_FAILURE 
} from './../actions/types';

const initialState = {
    loading : false,
    errorMessage : '',
    shops: []
}

const products = ( state = initialState, action ) => {
    switch(action.type) {
        case FETCHING_PRODUCT_REQUEST :
            return { ...state, loading: true} ;
        case FETCHING_PRODUCT_SUCCESS : 
            return { ...this.state, loading: false, shops: action.payload };
        case FETCHING_PRODUCT_FAILURE : 
            return { ...state, loading: false, errorMessage: action.payload};
    }
};

export default products;

продукт. js

import * as React from 'react';

import { FlatList , ActivityIndicator} from 'react-native';

import { ListItem } from 'react-native-elements';

import { fetchProduct } from './../../actions/products';

import { connect } from 'react-redux';

import propTypes from 'prop-types';

class Product extends React.Component {

  constructor(props) {
    super(props);
    this.props.fetchProduct();
    this.state = {
      loading : true,
      shops : '',
     isFetching: false,
     active : true,
    }
   }


   fetchProducts() {
    const shopid = 13;
    fetch(`http://phplaravel-325095-1114213.cloudwaysapps.com/api/shop/shop`)
        .then(response => response.json())
          .then((responseJson)=> {
              this.setState({
                 loading: false,
                 shops: responseJson
              })
             alert(JSON.stringify(this.state.shops));
        })
    .catch(error=>console.log(error)) //to catch the errors if any
   }

    componentDidMount(){
      // this.fetchProducts();
      this.props.fetchProduct().then(this.setState({loading : false}));
    }



  renderItem = ({ item }) => (
  <ListItem
    title={item.name}
    subtitle={item.name}
    leftAvatar={{
      source: item.avatar && { uri: item.avatar },
      title: item.name[0]
    }}
    bottomDivider
    chevron
  />
)

render () {
    if(!this.state.loading)
    { 
      if(this.props.shopsInfo.loading)
      {
        return (
        <ActivityIndicator/>
        )
      }
      else
      {
        return (
        <FlatList
                vertical
                showsVerticalScrollIndicator={false}
                data={this.props.shopsInfo.shops}
                renderItem={this.renderItem}
              />
      )
      }
    }
    else
    {
      return (
        <ActivityIndicator/>
        )
    }
  }
}

Product.propTypes = {
  fetchProduct:  propTypes.func.isRequired
};


const mapStateToProps = (state) => {
  return { shopsInfo: state };
}

function mapDispatchToProps (dispatch) {
  return {
    fetchProduct: () => dispatch(fetchProduct())
  }
} 

export default connect(mapStateToProps, mapDispatchToProps)(Product);

Ответы [ 2 ]

0 голосов
/ 18 февраля 2020

Проблема в том, что вы передали неправильный реквизит в функции mapStateToProps. В редукторе ваше обновление значения отклика в магазине реквизита. Чтобы получить обновленное значение, вам нужно передать свойство shops для получения значения. 

const mapStateToProps = (state) => { 
   const { shops: state };  
   return {shops};
}
0 голосов
/ 18 февраля 2020

1. Не обновляется при изменении данных из бэкэнда.

Вы должны вызывать API на регулярной основе для получения обновленных данных. Реализация Redux не означает, что она будет извлекать данные с сервера при любых изменениях.

2. Даже значения не сохраняются в приложении

Если вы ожидаете, что при избыточном хранении данных будут храниться данные, даже если вы закроете / закроете приложение, чем не сможете. Вы сохранили данные, чтобы использовать их или сохранить в кеше. Взгляните на redux-persist

...