[Solved]-How do I display data from api using react and redux-Reactjs

You should try Redux Toolkit, it saves a lot of time in creating the actions and reducers. Also read about createAsyncThunk for fetching data using and RESTful API. Try this tutorial https://www.softkraft.co/how-to-setup-slices-with-redux-toolkit/ And take a look into the documentation https://redux-toolkit.js.org/api/createAsyncThunk

You're not referencing anything from your redux store in App.js. To call data from the store, you need to use the useSelecter hook.

And I'm assuming your code is incomplete? If not the useEffect hook is redundant here. So are the useDispatch and useState hooks.

Below is the edited code with redux toolkit. It is the recommended library for using redux currently. I've forgotten what I learned about actions and reducers.

I'm not sure how does your initial data in redux store looks like, but here goes.

App.js

import React from "react";
import { useSelector } from "react-redux";
import { getData } from "./actions/actions";


const App = () => {
  const {data} = useSelecter((state) => state)
  const dispatch = useDispatch();

  useEffect(() => {
   fetch("http://localhost:5000/routes")
    .then(res => {
      return res.json();
    })
    .then(data => {
     // dispatch to store
    })
   }, []);



  return (
    <div className="App">
      <h1>Hello</h1>
      {/* {posts.map((post)=>(
        <h1>{post.title}</h1>
      ))} */}
      {/* Trying to display title and description */}
      <h1>{data.title}</h1>  
      <h1>{data.description}</h1>  
    </div>
  );
};

export default App;