Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a84a017

Browse files
author
smishra38@sapient.com
committed
Managing state via Redux | Using Fetch API for GET, POST requests
1 parent 87088dc commit a84a017

File tree

5 files changed

+102
-83
lines changed

5 files changed

+102
-83
lines changed

‎package.json

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,17 @@
1616
"prop-types": "^15.5.10",
1717
"react": "^15.5.4",
1818
"react-dom": "^15.5.4",
19-
"react-router-dom": "^4.1.2"
19+
"react-redux": "^5.0.6",
20+
"react-router-dom": "^4.1.2",
21+
"react-router-redux": "^4.0.8",
22+
"redux": "^3.7.2",
23+
"redux-thunk": "^2.2.0"
2024
},
2125
"devDependencies": {
2226
"eslint": "^3.19.0",
2327
"eslint-plugin-react": "^7.0.1",
24-
"react-scripts": "0.9.5"
28+
"react-scripts": "0.9.5",
29+
"redux-immutable-state-invariant": "^2.0.0"
2530
},
2631
"scripts": {
2732
"start": "react-scripts start",

‎src/FormComponents/QuestionForm.js

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
11
import React from 'react';
22
import {Link , Redirect} from 'react-router-dom';
3-
import axios from 'axios';
3+
import {connect} from 'react-redux';
4+
import {bindActionCreators} from 'redux';
5+
import * as questionActions from '../actions/questionActions';
46
class AddQuestion extends React.PureComponent {
57
constructor(props) {
68
super(props);
7-
this.state = {
8-
question: '',
9-
option1: '',
10-
option2: '',
11-
option3:'',
12-
option4:'',
13-
key:'',
14-
fireRedirect:false
15-
};
169
this.handleQuestion = this.handleQuestion.bind(this);
1710
this.handleOption1 = this.handleOption1.bind(this);
1811
this.handleOption2 = this.handleOption2.bind(this);
@@ -47,21 +40,29 @@ class AddQuestion extends React.PureComponent {
4740
let option3 = this.state.option3.trim();
4841
let option4 = this.state.option4.trim();
4942
let key = this.state.key.trim();
50-
5143
if (!question || !option1 || !option2 || !option3 || !option4 || !key) {
5244
return;
5345
}
54-
const dataPassed = { question: question,
55-
options : [option1, option2, option3, option4],
56-
key : key
46+
const formData = { question: question,
47+
options : [option1, option2, option3, option4],
48+
key : key
5749
};
58-
axios.post(this.props.url, dataPassed)
59-
.then(res => {
60-
this.setState({ fireRedirect: true })
61-
50+
fetch(this.props.url, {
51+
method: 'post',
52+
headers: {
53+
'Accept': 'application/json, text/plain, */*',
54+
'Content-Type': 'application/json'
55+
},
56+
body: JSON.stringify(formData)
6257
})
63-
64-
this.setState({ name: '', age: '', nationality:'', place:"" });
58+
.then(res=>res.json())
59+
.then(res =>
60+
this.props.actions.createQuestion(this.props.questionAdded)
61+
62+
)
63+
.then(res =>
64+
this.props.actions.createQuestion(true)
65+
)
6566
}
6667

6768
render() {
@@ -114,13 +115,23 @@ class AddQuestion extends React.PureComponent {
114115
</div>
115116
</div>
116117
</form>
117-
{console.log(this.state.fireRedirect)}
118-
{this.state.fireRedirect && (
118+
{this.props.questionAdded && (
119119
<Redirect to='/questionAdded'/>
120120
)}
121121
</div>
122122

123123
}
124124
}
125+
function mapStateToProps(state, ownProps){
126+
return {
127+
questionAdded: state.addQuestion.questionAdded
128+
};
129+
}
130+
131+
function mapDispatchToProps(dispatch){
132+
return {
133+
actions: bindActionCreators(questionActions , dispatch)
134+
};
135+
}
125136

126-
export default AddQuestion;
137+
export default connect(mapStateToProps,mapDispatchToProps)(AddQuestion);

‎src/components/Options.js

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,18 @@
11
import React from 'react';
2-
import Answer from './Answer.js';
2+
import Answer from './Answer';
3+
import {connect} from 'react-redux';
4+
import {bindActionCreators} from 'redux';
5+
import * as answerActions from '../actions/selectedAnswerActions';
36
class Options extends React.PureComponent{
4-
constructor(props) {
5-
super(props)
6-
this.state = {
7-
bgClass :'neutral'
8-
}
9-
}
7+
108
handleClick (valClicked){
11-
var isCorrect = (valClicked.index+1) === this.props.data.key;
12-
this.setState({
13-
bgClass : isCorrect ? 'pass' : 'fail',
14-
showContinue: isCorrect
15-
})
16-
}
17-
componentWillReceiveProps(nextProps){
18-
this.setState({
19-
bgClass : 'neutral'
20-
})
9+
let isCorrect = (valClicked.index+1) === this.props.data.key;
10+
isCorrect = isCorrect ? 'pass' : 'fail'
11+
12+
this.props.actions.selectedAnswer(isCorrect);
2113
}
2214
render () {
23-
var options = this.props.data.options;
15+
let options = this.props.data.options;
2416
return (
2517
<div>
2618
<div className="col-md-10">
@@ -30,10 +22,21 @@ class Options extends React.PureComponent{
3022
</div>;
3123
} , this)}
3224
</div>
33-
<Answer classApply={this.state.bgClass}/>
25+
<Answer classApply={this.props.bgClass}/>
3426
</div>
3527
)
3628
}
3729
}
3830

39-
export default Options;
31+
function mapStateToProps(state, ownProps){
32+
return {
33+
bgClass : state.selectedAnswerReducer.bgClass
34+
};
35+
}
36+
37+
function mapDispatchToProps(dispatch){
38+
return {
39+
actions: bindActionCreators(answerActions , dispatch)
40+
};
41+
}
42+
export default connect(mapStateToProps,mapDispatchToProps)(Options);

‎src/components/Quiz.js

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
//import PropTypes from 'prop-types';
33
import { Link } from 'react-router-dom'
4-
import axios from 'axios';
54
import Question from './Question.js';
65
import Options from './Options.js';
76
//let data = require('./data.js'); //this imports data from local file, pass it as a prop to Quiz component
@@ -20,16 +19,11 @@ class Quiz extends React.PureComponent{
2019
constructor(props, context) {
2120
super(props, context);
2221
this.state = {
23-
change:false,
24-
data:"",
25-
questionAdded : 'hide',
26-
index:0,
27-
quesadded:true
22+
data:""
2823
}
29-
this.handleQuestionSubmit = this.handleQuestionSubmit.bind(this);
30-
this.loadCommentsFromServer = this.loadCommentsFromServer.bind(this);
24+
this.loadQuestionsFromServer = this.loadQuestionsFromServer.bind(this);
3125
}
32-
loadCommentsFromServer() {
26+
loadQuestionsFromServer() {
3327
fetch(this.props.url)
3428
.then(res => res.json())
3529
.then(data=>{
@@ -38,20 +32,8 @@ class Quiz extends React.PureComponent{
3832
}
3933

4034
componentWillMount() {
41-
this.loadCommentsFromServer();
35+
this.loadQuestionsFromServer();
4236
}
43-
handleQuestionSubmit(dataPassed) {
44-
axios.post(this.props.url, dataPassed)
45-
.then(res => {
46-
this.state.data.push(res.config.data);
47-
this.setState({
48-
questionAdded : 'show'
49-
});
50-
})
51-
.catch(err => {
52-
console.error(err);
53-
});
54-
}
5537

5638
render () {
5739
if(this.state.data==="" || this.state.data===undefined || this.state.data===null){

‎src/index.js

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,42 @@ import ReactDOM from 'react-dom';
33
import {
44
BrowserRouter as Router, Route
55
} from 'react-router-dom';
6+
import configureStore from './store/configureStore';
7+
import {Provider} from 'react-redux';
8+
import Quiz from './components/Quiz';
9+
import QuestionForm from './FormComponents/QuestionForm';
10+
import QuestionAdded from './components/QuestionAdded';
611

7-
import Quiz from './components/Quiz.js';
8-
import QuestionForm from './FormComponents/QuestionForm.js';
9-
import QuestionAdded from './components/QuestionAdded.js';
12+
const state={ addQuestion:{
13+
question: '',
14+
option1: '',
15+
option2: '',
16+
option3:'',
17+
option4:'',
18+
key:'',
19+
questionAdded:false
20+
},
21+
selectedAnswerReducer:{
22+
bgClass :'neutral'
23+
}
24+
};
25+
const store = configureStore(state);
1026

1127
ReactDOM.render(
12-
<Router>
13-
<div>
14-
<Route exact path="/" render={props =>
15-
<Quiz url='http://localhost:3001/api/questions' {...props} />
16-
}/>
17-
<Route exact path="/addQuestion" render={props =>
18-
<QuestionForm url='http://localhost:3001/api/questions'/>
19-
}/>
20-
<Route exact path="/questionAdded" render={props =>
21-
<QuestionAdded />
22-
}/>
23-
</div>
24-
</Router>,
28+
<Provider store={store}>
29+
<Router>
30+
<div>
31+
<Route exact path="/" render={props =>
32+
<Quiz url='http://localhost:3001/api/questions' {...props} />
33+
}/>
34+
<Route exact path="/addQuestion" render={props =>
35+
<QuestionForm url='http://localhost:3001/api/questions'/>
36+
}/>
37+
<Route exact path="/questionAdded" render={props =>
38+
<QuestionAdded />
39+
}/>
40+
</div>
41+
</Router>
42+
</Provider>,
2543
document.getElementById('root')
2644
);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /