0

Well I'm studying redux, but I was a little doubt how best to consume the api

i have on app:

import React,{Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './components/HomePage';
import { Provider } from 'react-redux';
import store from './store';
class App extends Component {

  render(){
    return (
      <div className="App">
      <Provider store={store}>
      <Home/>
      </Provider>
      </div>
    )
  }
}

export default App;

my 

import React, { Component } from 'react'
import {connect} from 'react-redux'
export default class index extends Component {
  render() {
    return (
      <div>

      </div>
    )
  }
}

my store:

import { createStore } from 'redux';

function reducer(){
    return [

    ];
}

const store = createStore(reducer);

export default store;

I am wondering where I would put my communication with my api

would it be an action?

Felipe
  • 452
  • 2
  • 7
  • 18
  • 1
    This will likely be opinion-based, but I prefer doing it in asynchronous action creators, using a `thunk` middleware to be able to dispatch actions asynchronously – Nick Dec 01 '19 at 19:58
  • Could you make an example based on what I posted so that I vote positive? – Felipe Dec 01 '19 at 20:01

2 Answers2

1

Consider using "redux-thunk". First, add thunk to your store and than You can put your API call inside the action creator :)

AdamKniec
  • 1,607
  • 9
  • 25
  • Thanks for the reply, could you give me an example regarding this code I posted? – Felipe Dec 01 '19 at 20:06
  • 1
    Take a look here :) https://stackoverflow.com/questions/40250036/where-to-put-api-calls-in-react-redux-architecture It's a really good source of knowledge and there's even an example of how to to this – AdamKniec Dec 01 '19 at 20:10
-1

Use Redux-Saga for this.

https://github.com/redux-saga/redux-saga

From doc:

redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.

hanuvoxinu
  • 7