title: how to use redux in react for get data from api
body: <p>Hello i am just starting to learn redux and am currently having a problem, i have an api i want to get information from and use it in different components i would appreciate if you help me</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import { createStore, applyMiddleware } from 'redux';
  import { Provider } from 'react-redux';
  import thunk from "redux-thunk";
  import { createLogger } from "redux-logger";
  import { BrowserRouter} from "react-router-dom";
  import Reducer from './Reducers';
  
  import App from './App';
  import fetchSimcards from './Actions/fetchSimcards';
  
  const middleware = [ thunk ];
  middleware.push( createLogger() );
  
  const store = createStore(
  Reducer
  applyMiddleware(...middleware),
  );
  
  
  import * as serviceWorker from './serviceWorker';
  
  store.dispatch(fetchSimcards());
  
  render(
  &lt;Provider store={store}&gt;
      &lt;BrowserRouter&gt;
          &lt;App /&gt;
      &lt;/BrowserRouter&gt;
  &lt;/Provider&gt;,
  
  document.getElementById('root')
   );
  
   serviceWorker.unregister();
  </code></pre>
  
  <p>and this is my action file</p>
  
  <pre><code>import * as type from '../Constans/ActionTypes';
  
   export const ReceiveSimcards = Simcards =&gt; ({
  type: type.RECEIVE_SIMCARDS,
  Simcards
  });
  </code></pre>
  
  <p>this is my reducer file</p>
  
  <pre><code>import { combineReducers } from "redux";
  
  const Simcards = ( state = {}, action ) =&gt; {
  console.log( state, action );
  return state;
  };
  
  export default combineReducers({
  Simcards
  });
  </code></pre>
  
  <p>this is my container file for simcards</p>
  
  <pre><code>import React, {Component} from 'react';
  import SimcardList from "../Component/SimcardList";
  import { connect } from "react-redux";
  
  class SimcardContainer extends Component {
  render() {
      const Simcards = this.props;
      return (
          &lt;div&gt;
              &lt;SimcardList title={"Simcards"} /&gt;
              &lt;div className="TableNumberItem"&gt;{Simcards.SimCardNumber}&lt;/div&gt;
              &lt;div className="TableNumberItem"&gt;{Simcards.SimCardDescription}&lt;/div&gt;
              &lt;div className="TableNumberItem"&gt;{Simcards.TeammatePrice}&lt;/div&gt;
          &lt;/div&gt;
      );
  }
  }
  
  export default connect()(SimcardContainer);
  </code></pre>
  
  <p>and i want show this container in home page</p>