Как получить API в реагирующе-нативном, особенно с использованием приставки в редукторе? - PullRequest
Новая
       15

Как получить API в реагирующе-нативном, особенно с использованием приставки в редукторе?

0 голосов
/ 06 мая 2019

в реагирующем нативном состоянии обычно используется и очень важно, если у нас есть данные для манипулирования или отображения в нашем телефоне, у реагирующих нативных систем есть проблема с состоянием, конечно, но для решения этой проблемы у меня возникли проблемы с избыточностью, я все еще новичокПарень по-родному реагирует, и просто понимает, как получить API «старым» способом, не используя приставку, но как?в редукторе я пытаюсь вызвать мою функцию и обратный вызов в моем компоненте, но не сработал, вот код:

peopleReducer.js: 

import { ADD_FRIENDS } from "../types";
import { INIT_PEOPLE } from "../states";

const peopleReducers = (state = INIT_PEOPLE, action) => {
  switch (action.type) {
    // // save image
    case ADD_FRIENDS:

      // find how to fetch API in react native redux
      makeRemoteRequest = () => {
        const { page, seed } = state;
        const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
        setState({ loading: true });
        fetch(url)
          .then(res => res.json())
          .then(res => {
            setState({
              data: page === 1 ? res.results : [...state.data, ...res.results],
              error: res.error || null,
              loading: false,
              refreshing: false
            });
            console.warn(res.results);
          })
          .catch(error => {
            setState({ error, loading: false });
          });
      };

    default:
      return state;
  }
};

export default peopleReducers;

friends.js 

import React from "react";
import { View, Text, FlatList, ActivityIndicator } from "react-native";
import { ListItem, SearchBar } from "react-native-elements";

// connect to redux
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
// import actions
import { addFriends } from "../config/redux/actions/peopleActions";

class friends extends React.Component {
  componentDidMount() {
    this.props.addFriends();
    // this.makeRemoteRequest();
  }

  render() {
    //   console.warn(this.props.peopleListDashboard.data)
    return (
      <View>
        <FlatList
          data={this.props.peopleListDashboard.data}
          renderItem={({ item }) => (
                <ListItem leftAvatar={{ uri: item.picture.thumbnail }} />
          )}
          keyExtractor={item => item.email}
        />
      </View>
    );
  }
}

// make accesible publicDashboard properties from reducer
const mapStateToProps = state => {
  const { peopleListDashboard } = state;
  return { peopleListDashboard };
};

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      addFriends
    },
    dispatch
  );

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

о триггере, да, я использую действие peopleAction.js 

import { ADD_FRIENDS } from "../types";

export const addFriends = friendsIndex => ({
    type: ADD_FRIENDS,
    payload: friendsIndex
});

надеюсь, вы, ребята, дадите мне подсказку, совет, даже ответ будет хорошим для меня.Спасибо

1 Ответ

0 голосов
/ 07 мая 2019

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

https://redux.js.org/introduction/getting-started

https://stackoverflow.com/questions/43848257/where-to-put-business-logic-in-redux-action-or-store

эта ссылка может вам помочь.

...