Quantcast
Channel: using axios and Redux to manage JSON data - Stack Overflow
Viewing all articles
Browse latest Browse all 2

using axios and Redux to manage JSON data

$
0
0

I have a JSON file in the public folder and would like to use the data throughout the react app. I'm using axios in App.js but don't know the best way to store the data received in the state. I was going to use props but there is a lot of data being returned so that's probably not the best idea. So I thought of using axios in each component (Home, About, Posts, Footer, and Aside) but that wouldn't make sense either because data is meant to flow from app.js to children, and I don't want to repeat code. This led me to google search for solutions using Redux, I haven't come across any potential articles or videos explaining how to use Axios with Redux. My question is is there a way to manage JSON data in Redux or another state management library?

App.js

function App() {const [data, setData] = useState({});useEffect(() => {    axios.get('data/data.json')    .then(res => setData(res.data))    .catch(err =>console.log(err))},[])  return (<Router><header><div className="container container-flex"><div className="site-title"><h1>{data.title}</h1><p className="subtitle">{data.subtitle}</p></div><nav><ul><li><Link className="current-page" to="/">home</Link></li><li><Link to="/about">about me</Link></li><li><Link to="/posts">recent posts</Link></li></ul></nav></div></header><div className="container container-flex"><Routes><Route path="/" element={<Home />}/><Route path="/about" element={<About />}/><Route path="/posts" element={<Posts />}/><Route path="*" element={<Error />}/></Routes><Aside /></div><Footer/></Router>  );}export default App;

HOME.js

const Home = () => {// const [data, setData] = useState({});// useEffect(() => {//     axios.get('data/data.json')//     .then(res => setData(res.data))//     .catch(err =>console.log(err))// },[])// console.log(data.articlemain1.title)    return (<> <main role="main"><article className="article-featured"><h2 className="article-title">{articleman1.title}</h2><img className="article-image" src={articleman1.image} alt={articleman1.alt}/><p className="article-info">{articleman1.info}</p><p className="article-body">{articleman1.body}</p><a className="article-read-more" href="https://www.github.com/jerrellbryant"></a></article><hr></hr></main></>    )}export default Home

Data.json

{"title": "Living the simple life","subtitle": "a blog exploring minimalism in life","articlemain1": {"title": "Finding simplicity in life","image": "img/life.jpg","alt": "Clock plant and lamp on a desk","info": "Feburary 21, 2022","body": "\n <strong>Life can get complicated really quickly</strong>, but it doesn't have to be!\n There are many ways to simplify your life, <a class='article-link' href='#'> a few of which we've explored in the past</a>.\n This week we're taking a bit of a approach though, in how you can find simplicity in the life you already living.","anchor": "Continue Reading"    },"articlesecondary1": {"image": "img/life.jpg","alt": "Clock plant and lamp on a desk","info": "Feburary 21, 2022","comments": "3 comments"    },"articlemain2": {"title": "Keeping cooking simple","body": "\n Food is a very important part of everyone's life.\n If you want to be healthy, you have to eat healthy.\n One of the easiest ways to do that is to keep your cooking nice and simple.","anchor": "Continue Reading"    },"articlesecondary2": {"image": "img/food.jpg","alt": "dumplings with chop sticks","info": "July 12, 2021","comments": "5 comments"    },"articlemain3": {"title": "Simple decoractions","body": "\n A home isn't a home until you've decorated a little.\n People either don't decorate, or they go overboard and it doesn't have the impact they were hoping for. \n Staying simple will help draw the eye where you want it to and make things pop like never before.","anchor": "Continue Reading"    },"articlesecondary3": {"image": "img/deco.jpg","alt": "plant in water bowl","info": "June 15, 2021","comments": "9 comments"    },"articlemain4": {"title": "Simplicity and work","body": "\n Work is often a major source of stress.\n People get frustrated,it ruins their relationship with others and it leads to burnout. \n By keeping your work life as simple as possible, it will help balance everything out.","anchor": "Continue Reading"    },"articlesecondary4": {"image": "img/work.jpg","alt": "desk chair with a white table","info": "May 7, 2021","comments": "6 comments"    },"widgettitle1": "About Me","widgettitle2": "Recent Posts","image": "img/aboutme.jpg","alt": "author smiling","body": "I find life better, and I'm happier, when things are nice and simple.","widgetpost1": {"title": "Keeping cooking simple","image": "img/food.jpg"    },"widgetpost2": {"title": "Simplicity and work","image": "img/work.jpg","alt": "dumplings with chop sticks"    },"widgetpost3": {"title": "Simple decorations","alt": "plant in water bowl","image": "img/deco.jpg"    },"footer": {"website": "Living the Simple Life","copyright": "Copyright 2022"    }}

Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles



Latest Images