How to display JSON data in an html element using redux-thunk store - json

Question

I am trying to use Redux and redux-thunk middleware to modify state change and make use of async actions to send data and receive data from the server. I created my own rails api which is returning the JSON data in the console.log of my webpage but Im wondering how to render this data in a div in my html. I realize this may not be coded in the best way, any help with re-writing would be appreciated too!
Here is the start of my app.js file
import React from "react";
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import "./assets/style.css";
import Quiz from "./components/quiz"
import Home from "./components/home";
import Result from "./components/Result";
import { useEffect } from "react";
function App() {
useEffect (() => {
fetch("http://127.0.0.1:3000/questions")
.then(resp => resp.json())
.then(console.log);
},[])
return (
<div className="App">
<Router>
<Switch >
<Route exact path="/">
<Home />
</Route>
{ <Route exact path="/quiz">
<Quiz/>
</Route>}
<Route exact path="/result">
<Result />
</Route>
</Switch>
</Router>
</div>
);
}
export default App
Here is my index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import quizReducer from './store/reducers/reducer'
import "./assets/style.css";
import App from "./App";
const store = createStore(quizReducer, applyMiddleware(thunk))
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
)
Here are my action/reducer
actions.js
export const getQuestion = (question) => ({type: "GOT_QUIZ", payload: question})
export const fetchQuestion = () => {
return (dispatch) => {
fetch(url)
.then(resp => resp.json())
.then(question => {
dispatch(getQuestion(question))
})
}
}
export const createQuestion = (question) => {
return () => {
const configObj = {
method: 'POST',
question: JSON.stringify(question)
}
fetch(url, configObj)
.then(resp => resp.json())
.then(json => {
console.log(json)
})
}
}
reducer.js
export default function quizReducer(state = {questionBank: []}, action){
switch (action.type){
case "GOT_QUIZ":
return {...state, questionBank: action.payload}
default:
return state
}
}

Answer 1

Assuming that your reducer and actions are correct, you need to do two things in your components.
1) Initialize the Fetch
import {useDispatch} from 'react-redux';
import {fetchQuestion} from './actions';
const dispatch = useDispatch();
useEffect (() => {
dispatch(fetchQuestion());
}, []);
This will call your fetchQuestions thunk once when the component is first mounted.
2) Access the Data
import {useSelector} from 'react-redux';
const questions = useSelector(state => state.questionBank);
This will access the array of questions from your store and automatically respond to changes when the store state is updated.
Perhaps step 1 goes in App and step 2 goes in Quiz and Result. Or perhaps both steps go in App and you pass down the data through props.