fetch

src/actions/index.js

@@ -1,5 +1,25 @@
-export function fetchQuestion(){
- return function(dispatch){
 
+export function fetchQuestionAPI(){
+ // console.log()
+ return function(dispatch, getState){
+ // const {reduxState} = getState();
+ fetch(`https://opentdb.com/api.php?amount=1&type=multiple`)
+ .then(response => response.json())
+ .then(result => {
+ console.log(result)
+ dispatch(receiveQuestions(result))
+ dispatch()
+ })
+ .catch(function(error) {
+ // something went wrong. let's sort it out
+ });
  }
-}
+};
+
+
+export function receiveQuestions(result){
+ return {
+ type: 'RECEIVE_QUESTIONS',
+ questions: result
+ }
+}

src/components/App.js

@@ -1,10 +1,18 @@
 import React from 'react';
+import QuestionsContainer from '../containers/QuestionsContainer';
+
 
 class App extends React.Component {
+
+
+
+
+
  render(){
  return (
  <div>
- App contents go here
+ QUIZ 
+ <QuestionsContainer />
  </div>
  )
  }

src/components/Questions.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+class Questions extends React.Component {
+
+ constructor() {
+ super();
+ // this.quizDisplay = this.quizDisplay.bind(this);
+ }
+
+
+ componentDidMount(){
+ this.props.fetchQuestion()
+ }
+
+ render() {
+
+
+ return (
+ <div className="quiz__display">
+
+ </div>
+ );
+}
+
+}
+
+export default Questions;

src/containers/QuestionsContainer.js

@@ -0,0 +1,25 @@
+import { connect } from "react-redux";
+import Questions from "../components/Questions";
+// import { setQuery, submitQuery } from "../actions"
+import { fetchQuestionAPI } from '../actions';
+
+// fetchQuestion={this.props.fetchQuestion}
+
+const mapStateToProps = state => {
+ return {
+ // selectedQuery: state.searchInput.selectedQuery
+ };
+}
+
+
+const mapDispatchToProps = dispatch => {
+ return {
+ fetchQuestion: () => dispatch(fetchQuestionAPI())
+ // selectedQuery: state.searchInput.selectedQuery
+ };
+}
+
+
+export default connect(
+ mapStateToProps, mapDispatchToProps
+ )(Questions);

src/index.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App';
-
 import thunkMiddleware from 'redux-thunk';
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from "redux";
 import { Provider } from 'react-redux';
 import rootReducer from './reducers';
 
-const store = createStore(rootReducer, applyMiddleware(
- thunkMiddleware
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const store = createStore(rootReducer, {}, composeEnhancers(
+ applyMiddleware(thunkMiddleware) 
 ));
 
 ReactDOM.render(

src/reducers/questionsResults.js

@@ -0,0 +1,13 @@
+
+function questionsResults(state = [], action){
+ switch (action.type) {
+ case 'RECEIVE_QUESTIONS':
+ return action.questions
+
+
+ default:
+ return state
+ }
+ }
+
+ export default questionsResults;