example for react-redux-thunk

index.js

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

import { Card } from 'react-bootstrap';

import 'bootstrap/dist/css/bootstrap.min.css';
import thunk from 'redux-thunk';

const reducer = combineReducers({
  profiles: (state={},action) => {
    switch (action.type) {
      case "FETCH_COMPLETED":
        const profile = action.payload;
        const ticker = profile.ticker.toUpperCase();
        return Object.assign({},state,{[ticker]:profile});
      default:
        return state;
    }
  },
  error: (state=null,action) => {
    switch (action.type) {
      case "FETCH_FAILED":
        return action.payload;
      default:
        return state;
    }    
  }
});

const store = createStore(reducer, applyMiddleware(thunk));

function loadProfile(ticker) {
  return async (dispatch) => {
    const params = new URLSearchParams();
    params.set("symbol",ticker);
    const apiUrl = `/profile?${params}`;
    const options = {
      method: 'GET',
      mode: 'no-cors'
    };
    try {
      const response = await fetch(apiUrl,options);
      const json = await response.json();
      dispatch(loadProfileSuccess(json));
    } catch (error) {
      dispatch(loadProfileFail(error));
    }
  }
}

function loadProfileSuccess(json) {
  return {
    type: "FETCH_COMPLETED",
    payload: json
  };
}

function loadProfileFail(error) {
  return {
    type: "FETCH_FAILED",
    payload: error
  };
}

//store.dispatch(loadProfile("ibm"));
//store.dispatch(loadProfile("aapl"));

function Profile(props) {
  const [ loading, setLoading ] = useState(false);
  const ticker = props.ticker.toUpperCase();
  const profile = useSelector( state => state.profiles[ticker] );
  const dispatch = useDispatch();

  if (typeof(profile) === "undefined" || profile === null) {
    if (loading === false) {
      dispatch(loadProfile(ticker));
      setLoading(true);
    }
    return (<p>Loading</p>);
  } else {
    console.log(profile);
    return (
      <Card
        className="primary"
        style={{width: '18rem'}}
      >
        <Card.Body>
          <Card.Title>
            <img src={profile.logo}/> {profile.ticker}
          </Card.Title>
          <Card.Text>
            <a href={profile.weburl}>
              {profile.name}
            </a>
            <br/>
            Industry: {profile.finnhubIndustry}
          </Card.Text>
        </Card.Body>
      </Card>
    );
  }
}

const tickers = [
  "ibm","aapl","emms","aph","cbri",
  "amed","it","slgx","flr","mmyt",
  "grif","trig","hscc","adbe","wu",
  "gme","gslo","zcbd","mtx","adi"
];

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
    {tickers.map(ticker => 
      <Profile key={ticker} ticker={ticker}/>
    )}
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();