Получите многократное состояние от избыточного в реагировать родной - PullRequest
Новая
       6

Получите многократное состояние от избыточного в реагировать родной

0 голосов
/ 20 мая 2018

Я собираюсь создать приложение, которое покажет цену топ-5 криптовалют.Я создаю список монет и передаю его в FlatList, и каждая карта содержит конкретные данные о монетах.Но в моей реализации все карты показывают одинаковую цену, и это ожидается, потому что у меня только одна цена в состоянии.Спасибо за любую идею помочь в этом вопросе.

coinReducer.js 

const INITIAL_STATE = {
  price: '',
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case COIN_PRICE:
      return { ...state, price: action.payload };
    default:
      return state;
  }
};

coinAction.js 

const URL = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms=BTC,ETH,XRP,BCH,EOS&tsyms=USD';

export const getCoinPrice = (symbol) => async (dispatch) => {
  try {
    const response = await axios.get(URL);
    return dispatch({
      type: COIN_PRICE,
      payload: response.data.RAW[symbol].USD.PRICE,
    });
  } catch (error) {
    throw error;
 }
};

cardSection.js 

class Card extends Component {

  componentWillMount() {
    this.props.getCoinPrice(this.props.item.symbol);
  }

  render() {
    return (
      <View>
        <Text>
          this.props.price
        </Text>
      </View>
    )
  }
}

export default connect(state => ({
  price: state.coinPrice.price
}), { getCoinPrice })(Card);

1 Ответ

0 голосов
/ 20 мая 2018

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

Измените ваш редуктор на: 

const INITIAL_STATE = {
  price: {},
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case COIN_PRICE:
      return { ...state, price: { ...state.price, action.payload } };
    default:
      return state;
  }
};

И затем измените действие на 

const URL = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms=BTC,ETH,XRP,BCH,EOS&tsyms=USD';
export const getCoinPrice = (symbol) => async (dispatch) => {
  try {
    const response = await axios.get(URL);
    const payload = {};
    payload[symbol] = response.data.RAW[symbol].USD.PRICE;
    return dispatch({
      type: COIN_PRICE,
      payload,
    });
  } catch (error) {
    throw error;
 }
};

И, наконец, ваш компонент на: 

class Card extends Component {

  componentWillMount() {
    this.props.getCoinPrice(this.props.item.symbol);
  }

  render() {
    return (
      <View>
        <Text>
          {this.props.price[this.props.item.symbol]}
        </Text>
      </View>
    )
  }
}

export default connect(state => ({
  price: state.coinPrice.price
}), { getCoinPrice })(Card);
...