How to fetch API in react-native specially using redux in the reducer?

Question

in react native state is commonly used and really important if we have using data to manipulate or displaying in our phone, react native have a problem with state of course, but redux came to solve that struggle stuff, I'm still newbie guy in react native, and just understand how to fetch API in 'old' way not using redux, but how ? in reducer I'm trying to call my function and callback in my component, but didn't work, here is the code :

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);

about the trigger, yes I'm using action peopleAction.js

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

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

hopefully you guys give me some clue, advice, even the answer is the good one for me. Thank You

score 0 · Answer 1 · answered May 07 '19 at 05:20

I think you need to fetch your data in an action file, not in reducer, and then dispatch your response on the reducer and save it on the store. with this approach, you can call your action whenever you want and this must work for you.i suggest checking these links too :

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

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

this links maybe help you.

How to fetch API in react-native specially using redux in the reducer?

1 Answers1